add css and tailwind demo for tabs component

mui · Sep 15, 2023 · 16dfaff · 16dfaff
1 parent 7600bf2
commit 16dfaff
Show file tree

Hide file tree

Showing 10 changed files with 481 additions and 1 deletion.
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { TabPanel } from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import { Tab, tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={0}>
+        <TabsList className="CustomTabsListIntroduction">
+          <Tab className="CustomTabIntroduction" value={0}>
+            My account
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={1}>
+            Profile
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={2}>
+            Language
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanelIntroduction" value={0}>
+          My account page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={1}>
+          Profile page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={2}>
+          Language page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+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 (
+    <style>
+      {`
+      .CustomTabsListIntroduction {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .CustomTabIntroduction {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: #fff;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: 600;
+        background-color: transparent;
+        width: 100%;
+        padding: 10px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 7px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTabIntroduction:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTabIntroduction:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTabIntroduction.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTabIntroduction.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanelIntroduction {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        padding: 20px 12px;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        border-radius: 12px;
+        opacity: 0.6;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { TabPanel } from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import { Tab, tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={0}>
+        <TabsList className="CustomTabsListIntroduction">
+          <Tab className="CustomTabIntroduction" value={0}>
+            My account
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={1}>
+            Profile
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={2}>
+            Language
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanelIntroduction" value={0}>
+          My account page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={1}>
+          Profile page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={2}>
+          Language page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+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 (
+    <style>
+      {`
+      .CustomTabsListIntroduction {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .CustomTabIntroduction {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: #fff;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: 600;
+        background-color: transparent;
+        width: 100%;
+        padding: 10px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 7px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTabIntroduction:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTabIntroduction:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTabIntroduction.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTabIntroduction.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanelIntroduction {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        padding: 20px 12px;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        border-radius: 12px;
+        opacity: 0.6;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/...tabs/UnstyledTabsIntroduction.tsx.preview → ...stem/UnstyledTabsIntroduction.tsx.preview b/...tabs/UnstyledTabsIntroduction.tsx.preview → ...stem/UnstyledTabsIntroduction.tsx.preview
diff --git a/...mponents/tabs/UnstyledTabsIntroduction.js → .../UnstyledTabsIntroduction/system/index.js b/...mponents/tabs/UnstyledTabsIntroduction.js → .../UnstyledTabsIntroduction/system/index.js
diff --git a/...ponents/tabs/UnstyledTabsIntroduction.tsx → ...UnstyledTabsIntroduction/system/index.tsx b/...ponents/tabs/UnstyledTabsIntroduction.tsx → ...UnstyledTabsIntroduction/system/index.tsx
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview
@@ -0,0 +1,10 @@
+<Tabs defaultValue={0}>
+  <StyledTabsList>
+    <StyledTab value={0}>My account</StyledTab>
+    <StyledTab value={1}>Profile</StyledTab>
+    <StyledTab value={2}>Language</StyledTab>
+  </StyledTabsList>
+  <StyledTabPanel value={0}>My account page</StyledTabPanel>
+  <StyledTabPanel value={1}>Profile page</StyledTabPanel>
+  <StyledTabPanel value={2}>Language page</StyledTabPanel>
+</Tabs>
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as BaseTabsList } from '@mui/base/TabsList';
+import { TabPanel as BaseTabPanel } from '@mui/base/TabPanel';
+import { Tab as BaseTab } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <Tabs defaultValue={0}>
+      <TabsList>
+        <Tab value={0}>My account</Tab>
+        <Tab value={1}>Profile</Tab>
+        <Tab value={2}>Language</Tab>
+      </TabsList>
+      <TabPanel value={0}>My account page</TabPanel>
+      <TabPanel value={1}>Profile page</TabPanel>
+      <TabPanel value={2}>Language page</TabPanel>
+    </Tabs>
+  );
+}
+
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+
+const TabsList = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabsList
+      ref={ref}
+      className={clsx(
+        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+TabsList.propTypes = {
+  className: PropTypes.string,
+};
+
+const Tab = React.forwardRef((props, ref) => {
+  return (
+    <BaseTab
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `font-sans ${
+                ownerState.selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                ownerState.disabled
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'cursor-pointer'
+              } text-sm leading-[1.3] font-semibold w-full py-2.5 px-3 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});
+
+Tab.propTypes = {
+  /**
+   * The props used for each slot inside the Tab.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+};
+
+const TabPanel = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabPanel
+      ref={ref}
+      className={clsx(
+        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+TabPanel.propTypes = {
+  className: PropTypes.string,
+};