From c7fadc2c672f61963e6c31380270b0af2e4087f3 Mon Sep 17 00:00:00 2001 From: ahmadhss366 Date: Mon, 30 Sep 2024 14:53:58 +0300 Subject: [PATCH] fix issues --- .../root-page/latest-blocks-table.tsx | 10 +-- .../internal/root-page/latest-txns-table.tsx | 79 +++++++++++-------- src/layout/footer/footer.component.tsx | 77 +++++++++--------- src/layout/header/header.component.tsx | 2 +- src/layout/header/header.scss | 8 +- .../header/searchbar-header.component.tsx | 15 ++-- 6 files changed, 103 insertions(+), 88 deletions(-) diff --git a/src/components/internal/root-page/latest-blocks-table.tsx b/src/components/internal/root-page/latest-blocks-table.tsx index ade56b5..2f992dc 100644 --- a/src/components/internal/root-page/latest-blocks-table.tsx +++ b/src/components/internal/root-page/latest-blocks-table.tsx @@ -25,7 +25,7 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) { {blocks.map((block, idx) => ( -
- -
- + - {block.txnsCount} txns + {block.txnsCount} txns
diff --git a/src/components/internal/root-page/latest-txns-table.tsx b/src/components/internal/root-page/latest-txns-table.tsx index cdcf276..55f9665 100644 --- a/src/components/internal/root-page/latest-txns-table.tsx +++ b/src/components/internal/root-page/latest-txns-table.tsx @@ -26,14 +26,14 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp {transactions.map((txn, idx) => ( {/* txn hash */} - +
-
+

+ TX# +

+
{/* block number */} {/* txn and reward */} - -
-

-
- From -
- - {shortenAddress(txn.from, 4)} - -

- -

- - To - - {isAddress(txn.to) ? ( + +
+
+

+
+ From +
- {shortenAddress(txn.to, 4)} - - ) : ( - - {txn.to} + {shortenAddress(txn.from, 4)} + +

+ +

+ + To - )} -

+ {isAddress(txn.to) ? ( + + {shortenAddress(txn.to, 4)} + + ) : ( + + {txn.to} + + )} +

+
+
+ {/* time ago */} +

+

+ {BnToDec(txn.value, 9, 9)} PWR +

+ +
{/* time ago */} - -

+ +

{BnToDec(txn.value, 9, 9)} PWR

diff --git a/src/layout/footer/footer.component.tsx b/src/layout/footer/footer.component.tsx index c313a13..02871d6 100644 --- a/src/layout/footer/footer.component.tsx +++ b/src/layout/footer/footer.component.tsx @@ -61,41 +61,31 @@ export default function FooterComponent() { const formik = useFormik({ initialValues: { email: '' }, validationSchema: yup.object({ - email: yup.string().email('Invalid email address').required('Input is empty, fill your email'), + email: yup + .string() + .email('Invalid email address') + .required('Input is empty, fill your email'), }), - onSubmit: (values) => { - // Intentionally left empty for custom handling outside Formik + onSubmit: (values, { resetForm }) => { + // Simulate API call + if (values.email) { + // Here you would normally handle the form submission to an API + setNotification({ + message: 'You have successfully subscribed to the newsletter!', + type: 'success', + }); + setShowNotification(true); + resetForm(); // Reset the form after submission + } else { + setNotification({ + message: 'Subscription failed. Please try again.', + type: 'error', + }); + setShowNotification(true); + } }, }); - // Custom submission handler - const handleFormSubmit = async (e: any) => { - e.preventDefault(); - await formik.validateForm(); - formik.setTouched({ email: true }); - - if (!formik.isValidating && !formik.errors.email) { - // Simulate API call or some operation with the email - console.log("Form submitted with email:", formik.values.email); - setNotification({ message: 'You have successfully subscribed to our newsletter!', type: 'success' }); - setShowNotification(true); - setTimeout(() => { - setShowNotification(false); - }, 3000); - - // Reset the form (optional) - formik.resetForm(); - } else if (formik.errors.email) { - setNotification({ message: formik.errors.email, type: 'error' }); - setShowNotification(true); - setTimeout(() => { - setShowNotification(false); - }, 3000); - } - }; - - - const [email, setEmail] = useState(''); const [notification, setNotification] = useState({ message: '', type: '' }); const [showNotification, setShowNotification] = useState(false); const [inputError, setInputError] = useState(false); @@ -124,7 +114,7 @@ export default function FooterComponent() { {navigation.map((item, idx) => ( {item.label} @@ -135,28 +125,41 @@ export default function FooterComponent() { {/* Newsletter */} -
+

Join our newsletter

-
+
+ {/* Display error message */} + {formik.touched.email && formik.errors.email && ( +

+ {formik.errors.email} +

+ )}
+ {/* Notification message after submission */} {showNotification && (
{notification.message}
diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx index 23fa472..1571c08 100644 --- a/src/layout/header/header.component.tsx +++ b/src/layout/header/header.component.tsx @@ -191,7 +191,7 @@ export default function HeaderComponent() {
  • {a.label} diff --git a/src/layout/header/header.scss b/src/layout/header/header.scss index 129d2e7..6f21cf8 100644 --- a/src/layout/header/header.scss +++ b/src/layout/header/header.scss @@ -22,6 +22,13 @@ .navbar-dropdown { .nav-dropdown-menu { display: none; + position: absolute; + top: 60px; + left: 0; + z-index: 10; + border-radius: 4px; + padding: 10px 0; + transition: all 0.3s ease; } &:hover { @@ -38,7 +45,6 @@ display: flex; justify-content: space-around; flex-flow: column nowrap; - @apply p-1; } diff --git a/src/layout/header/searchbar-header.component.tsx b/src/layout/header/searchbar-header.component.tsx index 06ac8a2..2f9140c 100644 --- a/src/layout/header/searchbar-header.component.tsx +++ b/src/layout/header/searchbar-header.component.tsx @@ -274,19 +274,14 @@ export default function SearchBarHeaderComponent() { {/* Mobile burger icon */}
    - {/* This is a simple burger icon. You can replace this with any SVG or icon library you prefer. */} - +
    +
    +
    +
    • {/* Mobile navigation menu */}