Merge pull request #110 from DuckyMomo20012/dev

feat: add dark mode switch
DuckyMomo20012 · Feb 8, 2024 · 5f294e1 · 5f294e1
2 parents 4c42f53 + 10e58fc
commit 5f294e1
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 30 deletions.
diff --git a/src/components/elements/Feature.tsx b/src/components/elements/Feature.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Anchor, Card, Space, Stack, Text } from '@mantine/core';
 
 const Feature = ({
@@ -34,7 +32,7 @@ const Feature = ({
         </Text>
       )}
       <Space h="lg" />
-      <Stack className="">{children}</Stack>
+      <Stack>{children}</Stack>
     </Card>
   );
 };

diff --git a/src/components/layouts/AppShell.tsx b/src/components/layouts/AppShell.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { Icon } from '@iconify/react/dist/iconify.js';
+import { Icon } from '@iconify/react';
 import {
   ActionIcon,
   Anchor,

diff --git a/src/components/modules/ButtonDemo.tsx b/src/components/modules/ButtonDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Icon } from '@iconify/react';
 import { ActionIcon, Button } from '@mantine/core';
 import { memo } from 'react';

diff --git a/src/components/modules/ComboboxDemo.tsx b/src/components/modules/ComboboxDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Autocomplete,
   Group,

diff --git a/src/components/modules/DataDisplayDemo.tsx b/src/components/modules/DataDisplayDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Icon } from '@iconify/react';
 import {
   Accordion,

diff --git a/src/components/modules/FeedbackDemo.tsx b/src/components/modules/FeedbackDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Alert, Notification, Progress, Skeleton } from '@mantine/core';
 import { memo } from 'react';
 import { Feature } from '@/components/elements/Feature';

diff --git a/src/components/modules/InputDemo.tsx b/src/components/modules/InputDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Checkbox,
   Chip,

diff --git a/src/components/modules/NavigationDemo.tsx b/src/components/modules/NavigationDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { NavLink, Pagination, Stepper, Tabs } from '@mantine/core';
 import { memo } from 'react';
 import { Feature } from '@/components/elements/Feature';

diff --git a/src/components/modules/OverlayDemo.tsx b/src/components/modules/OverlayDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Button, Tooltip } from '@mantine/core';
 import { memo } from 'react';
 import { Feature } from '@/components/elements/Feature';

diff --git a/src/components/modules/TypographyDemo.tsx b/src/components/modules/TypographyDemo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Icon } from '@iconify/react';
 import { Blockquote, Code, Highlight, Stack, Title } from '@mantine/core';
 import { memo } from 'react';
@@ -68,12 +66,12 @@ const TypographyDemo = memo(function TypographyDemo({
         title="Title"
         url="https://mantine.dev/core/title/"
       >
-        <Title order={1}>{label}</Title>
-        <Title order={2}>{label}</Title>
-        <Title order={3}>{label}</Title>
-        <Title order={4}>{label}</Title>
-        <Title order={5}>{label}</Title>
-        <Title order={6}>{label}</Title>
+        <Title order={1}>H1: {label}</Title>
+        <Title order={2}>H2: {label}</Title>
+        <Title order={3}>H3: {label}</Title>
+        <Title order={4}>H4: {label}</Title>
+        <Title order={5}>H5: {label}</Title>
+        <Title order={6}>H6: {label}</Title>
       </Feature>
     </>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import {
   Switch,
   Text,
   TextInput,
+  useMantineColorScheme,
   useMantineTheme,
 } from '@mantine/core';
 import { useDeferredValue, useState } from 'react';
@@ -37,6 +38,8 @@ export type ControlledDemoProps = {
 
 const HomePage = () => {
   const themes = useMantineTheme();
+  const { setColorScheme } = useMantineColorScheme();
+
   const [color, setColor] = useState(themes.primaryColor);
   const [size, setSize] = useState<MantineSize>('sm');
   const [radius, setRadius] = useState<MantineSize>('md');
@@ -79,7 +82,7 @@ const HomePage = () => {
       <Stack className="relative">
         <Stack
           align="center"
-          className="top-[calc(var(--app-shell-header-offset,_0px)_+_var(--app-shell-padding))] z-50 w-full bg-white py-4 shadow-sm lg:sticky"
+          className="top-[calc(var(--app-shell-header-offset,_0px)_+_var(--app-shell-padding))] z-50 w-full bg-white p-6 shadow-sm dark:bg-dark-800 lg:sticky"
         >
           <SimpleGrid
             className="max-w-4xl"
@@ -122,6 +125,15 @@ const HomePage = () => {
                   label="Loading"
                   onChange={(e) => setLoading(e.currentTarget.checked)}
                 />
+                <Switch
+                  label="Dark mode"
+                  onChange={(e) =>
+                    setColorScheme(e.currentTarget.checked ? 'dark' : 'light')
+                  }
+                  wrapperProps={{
+                    'data-test-id': 'demo-color-scheme-toggle',
+                  }}
+                />
               </Group>
               <Stack gap="xs">
                 <Text component="label" htmlFor="size-slider">
@@ -184,7 +196,7 @@ const HomePage = () => {
               <Stack gap="xs">
                 <Text>Color: {color}</Text>
                 <SimpleGrid
-                  className="max-w-max"
+                  className="w-full justify-items-center"
                   cols={{ base: 6, xs: 8, sm: 12 }}
                   spacing="md"
                   verticalSpacing="xs"