init

src/App.tsx

@@ -0,0 +1,7 @@
+import MainContainer from './components/MainContainer';
+
+function App() {
+  return <MainContainer />;
+}
+
+export default App;

src/components/MainContainer.tsx

@@ -0,0 +1,17 @@
+import PageContainer from './PageContainer';
+import Sidebar from './Sidebar';
+import { ToggleTheme } from './ToggleTheme';
+
+function MainContainer() {
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <PageContainer />
+      <div className="absolute bottom-4 right-4">
+        <ToggleTheme />
+      </div>
+    </div>
+  );
+}
+
+export default MainContainer;

src/components/PageContainer.tsx

@@ -0,0 +1,14 @@
+import Topbar from './Topbar';
+
+function PageContainer() {
+  return (
+    <div className="flex flex-col flex-1">
+      <Topbar />
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Main Content</h1>
+      </div>
+    </div>
+  );
+}
+
+export default PageContainer;

src/components/Sidebar.tsx

@@ -0,0 +1,9 @@
+function Sidebar() {
+  return (
+    <nav className="flex justify-center min-w-[240px] max-w-[480px] bg-sidebar border">
+      <p>Sidebar</p>
+    </nav>
+  );
+}
+
+export default Sidebar;

src/components/ToggleTheme.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { Moon, Sun } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { useTheme } from '../hooks/useThemeHook';
+import { changeTheme } from '../lib/utils';
+
+export function ToggleTheme() {
+  const { theme, toggleTheme } = useTheme();
+
+  useEffect(() => {
+    changeTheme(theme);
+  }, [theme]);
+
+  return (
+    <Button onClick={() => toggleTheme(theme)} variant="outline" size="icon">
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

src/components/Topbar.tsx

@@ -0,0 +1,11 @@
+function Topbar() {
+  return (
+    <div className="flex bg-sidebar p-2 gap-2 border-t border-r border-b border-l-0">
+      <span>item 1</span>
+      <span>item 2</span>
+      <span>item 3</span>
+    </div>
+  );
+}
+
+export default Topbar;

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/hooks/useThemeHook.ts

@@ -0,0 +1,8 @@
+import { useThemeStore } from '../store/store';
+
+export const useTheme = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+
+  return { theme, toggleTheme };
+};

src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import type { Theme } from '../types/ui';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const changeTheme = (theme: Theme) => {
+  const root = window.document.documentElement;
+  const isDark = theme === 'dark';
+  root.classList.remove(isDark ? 'light' : 'dark');
+  root.classList.add(theme);
+};

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles/index.css';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/store/store.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Theme } from '../types/ui';
+
+export interface IUrmomStore {
+  urmom: number;
+  increaseUrmom: () => void;
+  removeUrmom: () => void;
+}
+
+export const useUrmomStore = create<IUrmomStore>((set) => ({
+  urmom: 0,
+  increaseUrmom: () =>
+    set((state) => ({
+      urmom: state.urmom + 1,
+    })),
+  removeUrmom: () => set({ urmom: 0 }),
+}));
+
+export interface IThemeStore {
+  theme: Theme;
+  toggleTheme: (theme: Theme) => void;
+}
+
+export const useThemeStore = create<IThemeStore>()(
+  persist(
+    (set) => ({
+      theme: 'dark',
+      toggleTheme: (theme: Theme) =>
+        set(() => ({
+          theme: theme === 'dark' ? 'light' : 'dark',
+        })),
+    }),
+    {
+      name: 'Frontalobe-Theme',
+    }
+  )
+);

src/styles/index.css

@@ -0,0 +1,120 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/types/ui.ts

@@ -0,0 +1 @@
+export type Theme = 'dark' | 'light';

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />