Update Menu stories

exoup · Mar 11, 2024 · 08baca1 · 08baca1
1 parent 175d1c5
commit 08baca1
Showing 1 changed file with 44 additions and 35 deletions.
diff --git a/src/components/Menu/Menu.stories.jsx b/src/components/Menu/Menu.stories.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import Menu, { MenuControl, MenuContent, MenuItem, MenuDivider } from "./Menu";
 import Avatar, { AvatarWithText, Content, Title, Subtitle } from "../Avatar/Avatar";
 import Button from "../Button/Button";
@@ -11,68 +10,78 @@ export default {
     },
     argTypes: {
         color: {
-            defaultValue: 'primary',
-            options: ['primary', 'secondary', 'tertiary', 'neutral'],
-            control: { type: 'inline-radio' }
+            defaultValue: "primary",
+            options: ["primary", "secondary", "tertiary", "neutral"],
+            control: { type: "inline-radio" },
         },
         radius: {
-            defaultValue: 'round',
-            options: ['round', 'sharp'],
-            control: { type: 'inline-radio' }
+            defaultValue: "round",
+            options: ["round", "sharp"],
+            control: { type: "inline-radio" },
         },
         alignment: {
-            defaultValue: 'center',
-            options: ['center', 'left', 'right'],
-            control: { type: 'inline-radio' }
+            defaultValue: "center",
+            options: ["center", "left", "right"],
+            control: { type: "inline-radio" },
         },
-    }
+    },
 };
 
 export const MenuStory = ({ ...args }) => (
-    // <div className="flex justify-between m-2">
     <Menu>
         <MenuControl>
-            <Button {...args} className={'flex gap-2 place-content-center'}>
+            <Button {...args} className={"flex gap-2 place-content-center"}>
                 Button
-                <ChevronDownIcon className="size-6" />
+                <ChevronDownIcon className='size-6' />
             </Button>
         </MenuControl>
-        <MenuContent {...args} className={'w-44'}>
-            <MenuItem><UserCircleIcon className="size-5" />Profile</MenuItem>
-            <MenuItem><Cog6ToothIcon className="size-5" />Settings</MenuItem>
+        <MenuContent {...args} className={"w-44"}>
+            <MenuItem>
+                <UserCircleIcon className='size-5' />
+                Profile
+            </MenuItem>
+            <MenuItem>
+                <Cog6ToothIcon className='size-5' />
+                Settings
+            </MenuItem>
             <MenuDivider />
-            <MenuItem disabled><ArrowRightStartOnRectangleIcon className="size-5" />Logout</MenuItem>
+            <MenuItem disabled>
+                <ArrowRightStartOnRectangleIcon className='size-5' />
+                Logout
+            </MenuItem>
         </MenuContent>
     </Menu>
-    // </div>
 );
 
-MenuStory.storyName = "Menu"
+MenuStory.storyName = "Menu";
 
 export const MenuProfile = ({ name, subtitle, ...args }) => (
-    <div className="flex justify-between m-2">
+    <div className='flex justify-between m-2'>
         <Menu>
             <MenuControl>
-                <AvatarWithText className="cursor-pointer">
-                    <Avatar
-                        {...args}
-                        radius="full"
-                        name={name}
-                    />
+                <AvatarWithText className='cursor-pointer'>
+                    <Avatar {...args} radius='full' name={name} />
                     <Content typography={args.color}>
                         <Title>{name}</Title>
                         <Subtitle>{subtitle}</Subtitle>
                     </Content>
-                    <ChevronDownIcon className="size-4 dark:text-white" />
+                    <ChevronDownIcon className='size-4 dark:text-white' />
                 </AvatarWithText>
             </MenuControl>
-            <MenuContent
-                {...args}
-                className="w-56">
-                <MenuItem><UserCircleIcon className="size-5" />Profile</MenuItem>
-                <MenuItem><Cog6ToothIcon className="size-5" />Settings</MenuItem>
+            <MenuContent {...args} className='w-56'>
+                <MenuItem>
+                    <UserCircleIcon className='size-5' />
+                    Profile
+                </MenuItem>
+                <MenuItem>
+                    <Cog6ToothIcon className='size-5' />
+                    Settings
+                </MenuItem>
                 <MenuDivider />
-                <MenuItem disabled><ArrowRightStartOnRectangleIcon className="size-5" />Logout</MenuItem>
+                <MenuItem disabled>
+                    <ArrowRightStartOnRectangleIcon className='size-5' />
+                    Logout
+                </MenuItem>
             </MenuContent>
         </Menu>
     </div>
@@ -82,4 +91,4 @@ MenuProfile.storyName = "Profile Menu";
 MenuProfile.args = {
     name: "Just Yogurt",
     subtitle: "To brie or not to brie",
-};
+};