feat: enhanced our theme customizer, now we have more preview components

Author: kelvink96

app/pages/about/page.tsx

@@ -26,7 +26,6 @@ import {
 } from '@tabler/icons-react';
 
 import { PageHeader, Surface } from '@/components';
-import classes from '@/layout/Guest/HeaderNav/HeaderNav.module.css';
 import { PATH_DASHBOARD, PATH_GITHUB } from '@/routes';
 
 const items = [
@@ -104,7 +103,6 @@ function Pricing() {
               href={PATH_GITHUB.repo}
               variant="filled"
               leftSection={<IconBrandGithub size={16} />}
-              className={classes.link}
               rel="noopener noreferrer"
             >
               Give us a star

components/PageHeader/PageHeader.tsx

@@ -4,10 +4,8 @@ import {
   ActionIcon,
   Breadcrumbs,
   BreadcrumbsProps,
-  Button,
   Divider,
   Flex,
-  Paper,
   PaperProps,
   Stack,
   Text,
@@ -16,9 +14,10 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
-import { IconPlus, IconRefresh } from '@tabler/icons-react';
+import { IconRefresh } from '@tabler/icons-react';
 
 import { FilterDateMenu, Surface } from '@/components';
+import { useAuth } from '@/hooks/useAuth';
 
 type PageHeaderProps = {
   title: string;
@@ -37,6 +36,7 @@ const PageHeader = (props: PageHeaderProps) => {
     actionContent,
     ...others
   } = props;
+  const { user } = useAuth();
 
   const theme = useMantineTheme();
   const colorScheme = useColorScheme();
@@ -98,7 +98,7 @@ const PageHeader = (props: PageHeaderProps) => {
           >
             <Stack gap={4}>
               <Title order={3}>{title}</Title>
-              <Text>Welcome back, Kelvin!</Text>
+              <Text>Welcome back, {user?.userName}!</Text>
             </Stack>
             {renderActions()}
           </Flex>

components/theme-customizer/ThemeCustomizer.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect } from 'react';
+'use client';
+
+import { useEffect } from 'react';
 
 import {
   Badge,
@@ -13,17 +15,16 @@ import {
   useMantineColorScheme,
 } from '@mantine/core';
 import {
-  IconComponents,
   IconDeviceFloppy,
   IconLayout,
   IconPalette,
   IconRefresh,
-  IconTypography,
   IconX,
 } from '@tabler/icons-react';
 
 import { useThemeCustomizer } from '@/contexts/theme-customizer';
 
+import { ThemePreviewCanvas } from './components/ThemePreviewCanvas';
 import { AppearanceTab } from './tabs/AppearanceTab';
 import { LayoutTab } from './tabs/LayoutTab';
 
@@ -98,95 +99,75 @@ export default function ThemeCustomizerDrawer({
         </Group>
       }
       position="right"
-      size="md"
+      size="100%"
       padding="md"
       closeButtonProps={{
         icon: <IconX size={16} />,
       }}
     >
-      <Stack h="100%" gap={0}>
-        <Text fz="sm" c="dimmed" mb="md">
-          Explore different styles according to your preferences. Changes are
-          previewed in real-time.
-        </Text>
-
-        <ScrollArea style={{ flex: 1 }} offsetScrollbars>
-          <Tabs defaultValue="layout">
-            <Tabs.List>
-              <Tabs.Tab value="layout" leftSection={<IconLayout size={16} />}>
-                Layout
-              </Tabs.Tab>
-              <Tabs.Tab
-                value="appearance"
-                leftSection={<IconPalette size={16} />}
-              >
-                Appearance
-              </Tabs.Tab>
-              <Tabs.Tab
-                value="typography"
-                leftSection={<IconTypography size={16} />}
-                disabled
+      <Group grow align="start" h="100%" gap="xl" wrap="nowrap">
+        {/* Customization Controls */}
+        <Box w={360} style={{ minWidth: 320 }}>
+          <Stack gap="sm">
+            <Text fz="sm" c="dimmed">
+              Explore different styles. Changes are previewed in real-time.
+            </Text>
+            <ScrollArea h="calc(100vh - 180px)" offsetScrollbars>
+              <Tabs defaultValue="layout">
+                <Tabs.List grow>
+                  <Tabs.Tab
+                    value="layout"
+                    leftSection={<IconLayout size={16} />}
+                  >
+                    Layout
+                  </Tabs.Tab>
+                  <Tabs.Tab
+                    value="appearance"
+                    leftSection={<IconPalette size={16} />}
+                  >
+                    Appearance
+                  </Tabs.Tab>
+                  {/* Add more tabs here */}
+                </Tabs.List>
+
+                <Tabs.Panel value="layout" pt="md">
+                  <LayoutTab
+                    config={previewConfig}
+                    onConfigUpdate={updateConfig}
+                  />
+                </Tabs.Panel>
+
+                <Tabs.Panel value="appearance" pt="md">
+                  <AppearanceTab
+                    config={previewConfig}
+                    onConfigUpdate={updateConfig}
+                  />
+                </Tabs.Panel>
+              </Tabs>
+            </ScrollArea>
+            <Group justify="space-between">
+              <Button
+                variant="subtle"
+                leftSection={<IconRefresh size={16} />}
+                onClick={handleReset}
+                disabled={!hasUnsavedChanges}
               >
-                Typography
-              </Tabs.Tab>
-              <Tabs.Tab
-                value="components"
-                leftSection={<IconComponents size={16} />}
-                disabled
+                Reset
+              </Button>
+              <Button
+                leftSection={<IconDeviceFloppy size={16} />}
+                onClick={handleApply}
+                disabled={!hasUnsavedChanges}
               >
-                Components
-              </Tabs.Tab>
-            </Tabs.List>
-
-            <Tabs.Panel value="layout" pt="md">
-              <LayoutTab config={previewConfig} onConfigUpdate={updateConfig} />
-            </Tabs.Panel>
-
-            <Tabs.Panel value="appearance" pt="md">
-              <AppearanceTab
-                config={previewConfig}
-                onConfigUpdate={updateConfig}
-              />
-            </Tabs.Panel>
-
-            <Tabs.Panel value="typography" pt="md">
-              <Stack align="center" mt="xl">
-                <Text c="dimmed" size="sm">
-                  Typography customization coming soon
-                </Text>
-              </Stack>
-            </Tabs.Panel>
-
-            <Tabs.Panel value="components" pt="md">
-              <Stack align="center" mt="xl">
-                <Text c="dimmed" size="sm">
-                  Component customization coming soon
-                </Text>
-              </Stack>
-            </Tabs.Panel>
-          </Tabs>
-        </ScrollArea>
-
-        <Box pt="md">
-          <Group justify="space-between">
-            <Button
-              variant="subtle"
-              leftSection={<IconRefresh size={16} />}
-              onClick={handleReset}
-              disabled={!hasUnsavedChanges}
-            >
-              Reset
-            </Button>
-            <Button
-              leftSection={<IconDeviceFloppy size={16} />}
-              onClick={handleApply}
-              disabled={!hasUnsavedChanges}
-            >
-              Save Changes
-            </Button>
-          </Group>
+                Save Changes
+              </Button>
+            </Group>
+          </Stack>
         </Box>
-      </Stack>
+
+        {/* Preview Canvas */}
+        <ThemePreviewCanvas config={previewConfig} />
+      </Group>
     </Drawer>
   );
 }