Skip to content

Commit

Permalink
fix issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmadhassoun366
ahmadhassoun366 committed Sep 30, 2024
1 parent 786345a commit c7fadc2
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 88 deletions.
10 changes: 4 additions & 6 deletions src/components/internal/root-page/latest-blocks-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) {
{blocks.map((block, idx) => (
<tr
key={idx}
className={`flex flex-col md:table-row ${
className={`flex flex-col md:table-row p-2 ${
idx % 2 == 0
? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
: 'bg-transparent'
Expand Down Expand Up @@ -71,14 +71,12 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) {
</Link>
</h1>

<br className="sm:hidden" />

<div className="flex gap-x-2">
<Link
<div className="flex gap-x-2 mt-4 xl:mt-0">
<Link
href={`${ROUTES.blockTxns(block.blockHeight)}`}
className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
>
{block.txnsCount} txns
{block.txnsCount} txns
</Link>

<div className="sm:hidden">
Expand Down
79 changes: 46 additions & 33 deletions src/components/internal/root-page/latest-txns-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
{transactions.map((txn, idx) => (
<tr
key={idx}
className={`flex flex-col md:table-row ${
className={`flex flex-col md:table-row p-4 gap-4 ${
idx % 2 == 0
? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
: 'bg-transparent'
}`}
>
{/* txn hash */}
<td className="p-4">
<td className="xl:p-4 p-0">
<div className="flex gap-x-4 flex-1">
<Image
className=" xl:block hidden"
Expand All @@ -42,7 +42,10 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
height={32}
alt=""
/>
<div className="space-y-2 ">
<h1 className=" block xl:hidden dark:text-white text-abrandc-dark-grey">
TX#
</h1>
<div className="flex flex-row xl:flex-col items-center justify-center gap-2">
{/* block number */}
<Link
href={`${ROUTES.transactions}/${txn.txnHash}`}
Expand All @@ -58,43 +61,53 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
</td>

{/* txn and reward */}
<td className="p-4">
<div>
<h1 className="flex gap-x-2">
<div className="dark:text-white text-abrandc-dark-grey">
From
</div>
<Link
href={`${ROUTES.address}/${txn.from}`}
className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 pl-1"
>
{shortenAddress(txn.from, 4)}
</Link>
</h1>

<h1 className="flex gap-x-2">
<span className="dark:text-white text-abrandc-dark-grey">
To
</span>
{isAddress(txn.to) ? (
<td className="xl:p-4 p-0">
<div className="flex justify-between items-end">
<div>
<h1 className="flex gap-x-2">
<div className="dark:text-white text-abrandc-dark-grey">
From
</div>
<Link
href={`${ROUTES.address}/${txn.to}`}
className="dark:text-ablue-100 text-ablue-500 font-medium dark:hover:text-ablue-300 hover:text-ablue-200"
href={`${ROUTES.address}/${txn.from}`}
className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 pl-1"
>
{shortenAddress(txn.to, 4)}
</Link>
) : (
<span className="dark:text-ablue-100 text-ablue-500 ">
{txn.to}
{shortenAddress(txn.from, 4)}
</Link>
</h1>

<h1 className="flex gap-x-2 xl:mt-0 mt-4">
<span className="dark:text-white text-abrandc-dark-grey">
To
</span>
)}
</h1>
{isAddress(txn.to) ? (
<Link
href={`${ROUTES.address}/${txn.to}`}
className="dark:text-ablue-100 text-ablue-500 font-medium dark:hover:text-ablue-300 hover:text-ablue-200"
>
{shortenAddress(txn.to, 4)}
</Link>
) : (
<span className="dark:text-ablue-100 text-ablue-500 ">
{txn.to}
</span>
)}
</h1>
</div>
<div className="">
{/* time ago */}
<h1 className="xl:p-4 p-0 xl:hidden block">
<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white text-abrandc-dark-grey text-sm py-1 px-2 text-center w-max">
{BnToDec(txn.value, 9, 9)} PWR
</h1>
</h1>
</div>
</div>
</td>

{/* time ago */}
<td className="p-2">
<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white text-abrandc-dark-grey text-sm py-1 px-2 text-center w-[120px]">
<td className="xl:p-4 p-0 xl:block hidden">
<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white text-abrandc-dark-grey text-sm py-1 px-2 text-center w-max">
{BnToDec(txn.value, 9, 9)} PWR
</h1>
</td>
Expand Down
77 changes: 40 additions & 37 deletions src/layout/footer/footer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -124,7 +114,7 @@ export default function FooterComponent() {
{navigation.map((item, idx) => (
<Link
href={item.href}
className="font-medium hover:text-ablue-800 dark:text-white dark:hover:text-ablue-200"
className="font-medium hover:text-ablue-200 dark:text-white dark:hover:text-ablue-300"
key={idx}
>
{item.label}
Expand All @@ -135,28 +125,41 @@ export default function FooterComponent() {

{/* Newsletter */}

<form onSubmit={handleFormSubmit} className="flex flex-col gap-y-2 mt-2">
<form onSubmit={formik.handleSubmit} className="flex flex-col gap-y-2 mt-2">
<h2 className="text-sm dark:text-white text-abrandc-dark-black font-medium">
Join our newsletter
</h2>
<div className="flex items-center gap-x-2">
<div className="flex items-start justify-center gap-x-2">
<div className="field lg:w-[235px] md:w-[185px]">
<input
className={`text-field ${inputError ? 'invalid' : ''}`}
className={`text-field !text-black ${
formik.touched.email && formik.errors.email
? '!border !border-red-500'
: ''
}`}
placeholder="Enter your email"
value={formik.values.email}
name="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{/* Display error message */}
{formik.touched.email && formik.errors.email && (
<p className="text-red-500 text-xs mt-1">
{formik.errors.email}
</p>
)}
</div>
<Button className="blue medium w-[116px]" type="submit">
Subscribe
</Button>
</div>
{/* Notification message after submission */}
{showNotification && (
<div
className={`mt-4 text-center text-white px-6 py-2 rounded-md notification ${notification.type === 'success' ? 'success' : 'error'
} ${showNotification ? 'show' : ''}`}
className={`mt-4 text-center px-6 py-2 rounded-md notification ${
notification.type === 'success' ? 'bg-green-500' : 'bg-red-500'
}`}
>
{notification.message}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/layout/header/header.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export default function HeaderComponent() {
<li key={idx}>
<Link
href={a.href}
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-agrey-800 dark:hover:text-white"
className="block px-4 py-2 hover:bg-gray-200 dark:hover:bg-agrey-800 dark:hover:text-white"
>
{a.label}
</Link>
Expand Down
8 changes: 7 additions & 1 deletion src/layout/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -38,7 +45,6 @@
display: flex;
justify-content: space-around;
flex-flow: column nowrap;

@apply p-1;
}

Expand Down
15 changes: 5 additions & 10 deletions src/layout/header/searchbar-header.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,19 +274,14 @@ export default function SearchBarHeaderComponent() {

{/* Mobile burger icon */}
<div className="md:hidden">
{/* This is a simple burger icon. You can replace this with any SVG or icon library you prefer. */}
<button
data-collapse-toggle="navbar-sticky"
type="button"
<div
className={`burger ${mobileNavOpen ? 'active' : ''}`}
aria-controls="navbar-sticky"
aria-expanded="true"
onClick={toggleMobileNav}
>
<div className="h-line h-line1"></div>
<div className="h-line h-line2"></div>
<div className="h-line h-line3"></div>
</button>
<div className="bar"></div>
<div className="bar"></div>
<div className="bar"></div>
</div>
</div>

{/* Mobile navigation menu */}
Expand Down

0 comments on commit c7fadc2

Please sign in to comment.