feat: add design system for Alert (#5205)

apps/web/src/components/Design/AlertDesign.tsx

@@ -0,0 +1,38 @@
+import { Alert, Button, Card, CardHeader } from '@hey/ui';
+import { type FC, useState } from 'react';
+
+const AlertDesign: FC = () => {
+  const [showAlert, setShowAlert] = useState(false);
+  const [showDestructiveAlert, setShowDestructiveAlert] = useState(false);
+
+  return (
+    <Card>
+      <CardHeader title="Alerts" />
+      <Alert
+        description="Normal alert"
+        onClose={() => setShowAlert(false)}
+        show={showAlert}
+        title="Normal alert"
+      />
+      <Alert
+        confirmText="Yes"
+        description="Destructive alert"
+        isDestructive
+        onClose={() => setShowDestructiveAlert(false)}
+        onConfirm={() => setShowDestructiveAlert(false)}
+        show={showDestructiveAlert}
+        title="Destructive alert"
+      />
+      <div className="m-5 flex gap-5">
+        <Button onClick={() => setShowAlert(true)} outline>
+          Show normal alert
+        </Button>
+        <Button onClick={() => setShowDestructiveAlert(true)} outline>
+          Show destructive alert
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+export default AlertDesign;

apps/web/src/components/Design/Buttons.tsx → apps/web/src/components/Design/ButtonsDesign.tsx

@@ -2,7 +2,7 @@ import { PlusIcon } from '@heroicons/react/24/outline';
 import { Button, Card, CardHeader } from '@hey/ui';
 import { type FC } from 'react';
 
-const Buttons: FC = () => {
+const ButtonsDesign: FC = () => {
   const ButtonVariants: FC<{
     outline: boolean;
   }> = ({ outline }) => {
@@ -86,4 +86,4 @@ const Buttons: FC = () => {
   );
 };
 
-export default Buttons;
+export default ButtonsDesign;

apps/web/src/components/Design/Profiles.tsx → apps/web/src/components/Design/ProfilesDesign.tsx

@@ -5,7 +5,7 @@ import UserProfile from '@components/Shared/UserProfile';
 import { Card, CardHeader, H5 } from '@hey/ui';
 import { type FC } from 'react';
 
-const Profiles: FC = () => {
+const ProfilesDesign: FC = () => {
   const profile = {
     handle: { localName: 'yoginth' },
     id: '0x0d',
@@ -92,4 +92,4 @@ const Profiles: FC = () => {
   );
 };
 
-export default Profiles;
+export default ProfilesDesign;

apps/web/src/components/Design/Typography.tsx → apps/web/src/components/Design/TypographyDesign.tsx

@@ -1,7 +1,7 @@
 import { Card, CardHeader, H1, H2, H3, H4, H5, H6 } from '@hey/ui';
 import { type FC } from 'react';
 
-const Typography: FC = () => {
+const TypographyDesign: FC = () => {
   const title = 'The quick brown fox jumps over the lazy dog';
 
   return (
@@ -20,4 +20,4 @@ const Typography: FC = () => {
   );
 };
 
-export default Typography;
+export default TypographyDesign;

apps/web/src/components/Design/index.tsx

@@ -3,17 +3,19 @@ import type { NextPage } from 'next';
 import { GridLayout } from '@hey/ui';
 import { GridItemTwelve } from '@hey/ui/src/GridLayout';
 
-import Buttons from './Buttons';
-import Profiles from './Profiles';
-import Typography from './Typography';
+import AlertDesign from './AlertDesign';
+import ButtonsDesign from './ButtonsDesign';
+import ProfilesDesign from './ProfilesDesign';
+import TypographyDesign from './TypographyDesign';
 
 const Design: NextPage = () => {
   return (
     <GridLayout>
       <GridItemTwelve className="space-y-5">
-        <Typography />
-        <Buttons />
-        <Profiles />
+        <TypographyDesign />
+        <ButtonsDesign />
+        <AlertDesign />
+        <ProfilesDesign />
       </GridItemTwelve>
     </GridLayout>
   );