Advertisement
Reowo

Untitled

Aug 16th, 2022
567
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Accordion, Button, Grid, useMantineTheme } from "@mantine/core";
  2.  
  3. function ThemePanel({ children }: any) {
  4.     const mantineTheme = useMantineTheme();
  5.  
  6.     return (
  7.         <div className="h-full shadow-xl p-2 rounded-lg" style={{ backgroundColor: mantineTheme.colors.dark[7] }}>
  8.             {children}
  9.         </div>
  10.     );
  11. }
  12.  
  13. function App() {
  14.     return (
  15.         <Grid grow gutter="xl" className="h-full">
  16.             <Grid.Col span={4}>
  17.                 <ThemePanel>
  18.                     <p>Some content</p>
  19.                     <div className="flex flex-col gap-y-4">
  20.                         <Button className="w-fit">Clicky!</Button>
  21.                         <Accordion defaultValue="customization">
  22.                             <Accordion.Item value="customization">
  23.                                 <Accordion.Control>Customization</Accordion.Control>
  24.                                 <Accordion.Panel>Colors, fonts, shadows and many other parts are customizable to fit your design needs</Accordion.Panel>
  25.                             </Accordion.Item>
  26.  
  27.                             <Accordion.Item value="flexibility">
  28.                                 <Accordion.Control>Flexibility</Accordion.Control>
  29.                                 <Accordion.Panel>
  30.                                     Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
  31.                                 </Accordion.Panel>
  32.                             </Accordion.Item>
  33.  
  34.                             <Accordion.Item value="focus-ring">
  35.                                 <Accordion.Control>No annoying focus ring</Accordion.Control>
  36.                                 <Accordion.Panel>
  37.                                     With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
  38.                                 </Accordion.Panel>
  39.                             </Accordion.Item>
  40.                         </Accordion>
  41.                     </div>
  42.                 </ThemePanel>
  43.             </Grid.Col>
  44.             <Grid.Col span={4}>
  45.                 <ThemePanel>
  46.                     <p>iMask sucks</p>
  47.                     <Button color={"cyan"}>Some color</Button>
  48.                 </ThemePanel>
  49.             </Grid.Col>
  50.             <Grid.Col span={4}>
  51.                 <ThemePanel>noob!</ThemePanel>
  52.             </Grid.Col>
  53.         </Grid>
  54.     );
  55. }
  56.  
  57. export default App;
  58.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement