From c82d15bb9926c5b598687b240f36a11fc9ec89a1 Mon Sep 17 00:00:00 2001 From: Ali Sasani Babak Date: Wed, 23 Aug 2023 16:53:05 +0100 Subject: [PATCH 1/3] add css and tailwind demo for menu component --- .../menu/MenuIntroduction/css/index.js | 163 ++++++++++++++++++ .../menu/MenuIntroduction/css/index.tsx | 163 ++++++++++++++++++ .../system/index.js} | 2 +- .../system/index.tsx} | 2 +- .../system/index.tsx.preview} | 2 +- .../menu/MenuIntroduction/tailwind/index.js | 109 ++++++++++++ .../menu/MenuIntroduction/tailwind/index.tsx | 98 +++++++++++ docs/data/base/components/menu/menu.md | 2 +- 8 files changed, 537 insertions(+), 4 deletions(-) create mode 100644 docs/data/base/components/menu/MenuIntroduction/css/index.js create mode 100644 docs/data/base/components/menu/MenuIntroduction/css/index.tsx rename docs/data/base/components/menu/{MenuIntroduction.js => MenuIntroduction/system/index.js} (97%) rename docs/data/base/components/menu/{MenuIntroduction.tsx => MenuIntroduction/system/index.tsx} (97%) rename docs/data/base/components/menu/{MenuIntroduction.tsx.preview => MenuIntroduction/system/index.tsx.preview} (83%) create mode 100644 docs/data/base/components/menu/MenuIntroduction/tailwind/index.js create mode 100644 docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js new file mode 100644 index 00000000000000..6e0530275de76e --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.js @@ -0,0 +1,163 @@ +import * as React from 'react'; +import { Menu } from '@mui/base/Menu'; +import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; +import { MenuButton } from '@mui/base/MenuButton'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +export default function MenuIntroduction() { + const createHandleMenuClick = (menuItem) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + + + Profile + + + Language settings + + + Log out + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx new file mode 100644 index 00000000000000..70ee0fda43b8c4 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx @@ -0,0 +1,163 @@ +import * as React from 'react'; +import { Menu } from '@mui/base/Menu'; +import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; +import { MenuButton } from '@mui/base/MenuButton'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +export default function MenuIntroduction() { + const createHandleMenuClick = (menuItem: string) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + + + Profile + + + Language settings + + + Log out + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/menu/MenuIntroduction.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js similarity index 97% rename from docs/data/base/components/menu/MenuIntroduction.js rename to docs/data/base/components/menu/MenuIntroduction/system/index.js index a253fc53084fc8..91550b9e6f8d93 100644 --- a/docs/data/base/components/menu/MenuIntroduction.js +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.js @@ -19,7 +19,7 @@ export default function MenuIntroduction() { Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx similarity index 97% rename from docs/data/base/components/menu/MenuIntroduction.tsx rename to docs/data/base/components/menu/MenuIntroduction/system/index.tsx index 353249d85e1371..7b56956e446509 100644 --- a/docs/data/base/components/menu/MenuIntroduction.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx @@ -19,7 +19,7 @@ export default function MenuIntroduction() { Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview similarity index 83% rename from docs/data/base/components/menu/MenuIntroduction.tsx.preview rename to docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview index 7a4c6378fff017..a67a0b2474189b 100644 --- a/docs/data/base/components/menu/MenuIntroduction.tsx.preview +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview @@ -4,7 +4,7 @@ Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js new file mode 100644 index 00000000000000..ea706af37521d5 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js @@ -0,0 +1,109 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { Menu as BaseMenu } from '@mui/base/Menu'; +import { MenuButton } from '@mui/base/MenuButton'; +import { MenuItem } from '@mui/base/MenuItem'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function MenuIntroduction() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + const createHandleMenuClick = (menuItem) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( +
+ + + My account + + + + + Profile + + + Language settings + + + Log out + + + +
+ ); +} + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +Menu.propTypes = { + /** + * The props used for each slot inside the Menu. + * @default {} + */ + slotProps: PropTypes.shape({ + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx new file mode 100644 index 00000000000000..fe17c10a593da6 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; +import { MenuButton } from '@mui/base/MenuButton'; +import { MenuItem } from '@mui/base/MenuItem'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function MenuIntroduction() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + const createHandleMenuClick = (menuItem: string) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( +
+ + + My account + + + + + Profile + + + Language settings + + + Log out + + + +
+ ); +} + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md index e0f7bc02fcc7ce..becfe81dbd3554 100644 --- a/docs/data/base/components/menu/menu.md +++ b/docs/data/base/components/menu/menu.md @@ -23,7 +23,7 @@ It renders an unordered list (`
    `) by default. Use the Menu Item to add items to the Menu. These are rendered as `
  • ` elements. -{{"demo": "MenuIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} +{{"demo": "MenuIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} ## Components From c335ee95b105042919259e12a7a8ae1397672a1d Mon Sep 17 00:00:00 2001 From: Ali Sasani Babak Date: Wed, 23 Aug 2023 17:03:59 +0100 Subject: [PATCH 2/3] add custom component for MenuSimple demo --- .../menu/MenuSimple/tailwind/index.js | 70 +++++++++++++++---- .../menu/MenuSimple/tailwind/index.tsx | 59 ++++++++++++---- 2 files changed, 105 insertions(+), 24 deletions(-) diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js index 1497c91f85cec5..7dfa9d0f74b465 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js @@ -1,5 +1,7 @@ import * as React from 'react'; -import { Menu } from '@mui/base/Menu'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { Menu as BaseMenu } from '@mui/base/Menu'; import { MenuButton } from '@mui/base/MenuButton'; import { MenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; @@ -27,17 +29,7 @@ export default function MenuSimple() { Dashboard - + ); } + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +Menu.propTypes = { + /** + * The props used for each slot inside the Menu. + * @default {} + */ + slotProps: PropTypes.shape({ + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx index 22fdf714067046..c6f09f53248184 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Menu } from '@mui/base/Menu'; +import clsx from 'clsx'; +import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; import { MenuButton } from '@mui/base/MenuButton'; import { MenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; @@ -27,17 +28,7 @@ export default function MenuSimple() { Dashboard - + ); } + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); From 90f4033579e0de36539cda5f6455ce2d9d7a161a Mon Sep 17 00:00:00 2001 From: Ali Sasani Babak Date: Sat, 26 Aug 2023 16:19:37 +0100 Subject: [PATCH 3/3] add custom MenuButton and MenuItem components to demo --- .../menu/MenuIntroduction/tailwind/index.js | 67 +++++++++++++------ .../menu/MenuIntroduction/tailwind/index.tsx | 58 ++++++++++------ .../tailwind/index.tsx.preview | 10 +++ .../menu/MenuSimple/tailwind/index.js | 67 +++++++++++++------ .../menu/MenuSimple/tailwind/index.tsx | 58 ++++++++++------ .../MenuSimple/tailwind/index.tsx.preview | 10 +++ 6 files changed, 182 insertions(+), 88 deletions(-) create mode 100644 docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview create mode 100644 docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js index ea706af37521d5..6cb844adb3525d 100644 --- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js @@ -2,8 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { Menu as BaseMenu } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -25,29 +25,13 @@ export default function MenuIntroduction() { return (
    - - My account - - + My account - - Profile - - + Profile + Language settings - - Log out - + Log out
    @@ -107,3 +91,42 @@ Menu.propTypes = { root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), }; + +const MenuButton = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuButton.propTypes = { + /** + * Class name applied to the root element. + */ + className: PropTypes.string, +}; + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuItem.propTypes = { + className: PropTypes.string, +}; diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx index fe17c10a593da6..1f6b7d16cc5903 100644 --- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import { MenuButton as BaseMenuButton, MenuButtonProps } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem, MenuItemProps } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -24,29 +24,13 @@ export default function MenuIntroduction() { return (
    - - My account - - + My account - - Profile - - + Profile + Language settings - - Log out - + Log out
    @@ -96,3 +80,33 @@ const Menu = React.forwardRef((props, ref) => { /> ); }); + +const MenuButton = React.forwardRef( + (props, ref) => { + const { className, ...other } = props; + return ( + + ); + }, +); + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..a9e2e559fff817 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview @@ -0,0 +1,10 @@ + + My account + + Profile + + Language settings + + Log out + + \ No newline at end of file diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js index 7dfa9d0f74b465..f56ac73595c42f 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js @@ -2,8 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { Menu as BaseMenu } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -25,29 +25,13 @@ export default function MenuSimple() { return (
    - - Dashboard - - + Dashboard - - Profile - - + Profile + My account - - Log out - + Log out
    @@ -107,3 +91,42 @@ Menu.propTypes = { root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), }; + +const MenuButton = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuButton.propTypes = { + /** + * Class name applied to the root element. + */ + className: PropTypes.string, +}; + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuItem.propTypes = { + className: PropTypes.string, +}; diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx index c6f09f53248184..e30fb6e2b17f70 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import { MenuButton as BaseMenuButton, MenuButtonProps } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem, MenuItemProps } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -24,29 +24,13 @@ export default function MenuSimple() { return (
    - - Dashboard - - + Dashboard - - Profile - - + Profile + My account - - Log out - + Log out
    @@ -96,3 +80,33 @@ const Menu = React.forwardRef((props, ref) => { /> ); }); + +const MenuButton = React.forwardRef( + (props, ref) => { + const { className, ...other } = props; + return ( + + ); + }, +); + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..f3f4842b95a98b --- /dev/null +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview @@ -0,0 +1,10 @@ + + Dashboard + + Profile + + My account + + Log out + + \ No newline at end of file