Implement Alert and Tooltip components
This commit is contained in:
adilallo
@@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Tooltip from "../components/Tooltip";
|
||||
import Alert from "../components/Alert";
|
||||
import Button from "../components/Button";
|
||||
|
||||
export default function ComponentsPreview() {
|
||||
const [alertVisible, setAlertVisible] = useState({
|
||||
default: true,
|
||||
positive: true,
|
||||
warning: true,
|
||||
danger: true,
|
||||
banner: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
|
||||
<div className="max-w-[1200px] mx-auto space-y-[var(--spacing-scale-064)]">
|
||||
<header className="space-y-[var(--spacing-scale-008)]">
|
||||
<h1 className="font-bricolage-grotesque text-[48px] leading-[56px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Component Preview
|
||||
</h1>
|
||||
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
|
||||
Temporary page for viewing and testing new components
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Tooltip Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Tooltip Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
|
||||
<Tooltip text="Tooltip positioned at top" position="top">
|
||||
<Button variant="default" size="medium">
|
||||
Hover me (Top)
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip text="Tooltip positioned at bottom" position="bottom">
|
||||
<Button variant="primary" size="medium">
|
||||
Hover me (Bottom)
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip text="Disabled tooltip" disabled>
|
||||
<Button variant="secondary" size="medium">
|
||||
Disabled Tooltip
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip text="Tooltip with icon button" position="top">
|
||||
<button className="p-[var(--spacing-scale-012)] rounded-full hover:bg-[var(--color-surface-default-tertiary)] transition-colors">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 9V11M10 15H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Alert Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Alert Component
|
||||
</h2>
|
||||
|
||||
<div className="space-y-[var(--spacing-scale-024)]">
|
||||
{/* Toast Alerts */}
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-016)]">
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
|
||||
Toast Alerts
|
||||
</h3>
|
||||
|
||||
{alertVisible.default && (
|
||||
<Alert
|
||||
title="Short alert banner message goes here"
|
||||
description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
|
||||
status="default"
|
||||
type="toast"
|
||||
onClose={() =>
|
||||
setAlertVisible({ ...alertVisible, default: false })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{alertVisible.positive && (
|
||||
<Alert
|
||||
title="Short alert banner message goes here"
|
||||
description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
|
||||
status="positive"
|
||||
type="toast"
|
||||
onClose={() =>
|
||||
setAlertVisible({ ...alertVisible, positive: false })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{alertVisible.warning && (
|
||||
<Alert
|
||||
title="Short alert banner message goes here"
|
||||
description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
|
||||
status="warning"
|
||||
type="toast"
|
||||
onClose={() =>
|
||||
setAlertVisible({ ...alertVisible, warning: false })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{alertVisible.danger && (
|
||||
<Alert
|
||||
title="Short alert banner message goes here"
|
||||
description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
|
||||
status="danger"
|
||||
type="toast"
|
||||
onClose={() =>
|
||||
setAlertVisible({ ...alertVisible, danger: false })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Banner Alerts */}
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-016)]">
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
|
||||
Banner Alerts
|
||||
</h3>
|
||||
|
||||
{alertVisible.banner && (
|
||||
<Alert
|
||||
title="Short alert banner message goes here"
|
||||
description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
|
||||
status="default"
|
||||
type="banner"
|
||||
onClose={() =>
|
||||
setAlertVisible({ ...alertVisible, banner: false })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Alert
|
||||
title="Positive banner alert"
|
||||
description="This is a positive banner message"
|
||||
status="positive"
|
||||
type="banner"
|
||||
/>
|
||||
|
||||
<Alert
|
||||
title="Warning banner alert"
|
||||
description="This is a warning banner message"
|
||||
status="warning"
|
||||
type="banner"
|
||||
/>
|
||||
|
||||
<Alert
|
||||
title="Danger banner alert"
|
||||
description="This is a danger banner message"
|
||||
status="danger"
|
||||
type="banner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user