customized shadcn's theme toggle

.gitignore

@@ -5,7 +5,8 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
-
+package-lock.json
+pnpm-lock.yaml
 # testing
 /coverage
 

src/components/features.tsx

@@ -1,4 +1,3 @@
-
 import { useEffect, useState } from "react";
 import Feature, { FeatureCard } from "./feature";
 import { Button } from "./ui/button";
@@ -13,91 +12,172 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from './ui/table';
+} from "./ui/table";
 import { CheckIcon, XIcon } from "lucide-react";
 import { QuestionMarkIcon } from "@radix-ui/react-icons";
 import ShineBorder from "./ui/shine-border";
 import SparklesText from "./ui/sparkles-text";
 
 function Checkmark() {
-  return <CheckIcon className="mx-auto text-black mx-auto rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
+  return (
+    <CheckIcon className="mx-auto text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
+  );
 }
 
 function Cross() {
-  return <XIcon className="mx-auto text-black mx-auto rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
+  return (
+    <XIcon className="mx-auto text-black rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
+  );
 }
 
 function Question() {
-  return <QuestionMarkIcon className="mx-auto text-black mx-auto rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
+  return (
+    <QuestionMarkIcon className="mx-auto text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
+  );
 }
 
 export default function Features() {
   return (
     <div>
       {/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
-      <h1 className="text-5xl font-bold mt-20 text-center flex justify-center items-center mb-2">What does Zen offer <SparklesText className="mx-2" text="YOU" />?</h1>
-      <p className="text-muted-foreground text-center mb-24">Zen Browser is packed with features that will change the way you browse the web. Here are<br/> some of the features that Zen offers.</p>
+      <h1 className="text-5xl font-bold mt-20 text-center flex justify-center items-center mb-2">
+        What does Zen offer <SparklesText className="mx-2" text="YOU" />?
+      </h1>
+      <p className="text-muted-foreground text-center mb-24">
+        Zen Browser is packed with features that will change the way you browse
+        the web. Here are
+        <br /> some of the features that Zen offers.
+      </p>
       <div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
         <div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
           <div className="bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Split views</h1>
-            <p className="text-muted-foreground mt-3">Split your browser into multiple views to browse multiple websites at once.</p>
+            <p className="text-muted-foreground mt-3">
+              Split your browser into multiple views to browse multiple websites
+              at once.
+            </p>
             <img src="/split-view.png" className="mt-8 w-full h-full" />
           </div>
           <div className="bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Workspaces</h1>
-            <p className="text-muted-foreground mt-3">Create workspaces to keep your tabs organized and your browsing experience clutter-free.</p>
+            <p className="text-muted-foreground mt-3">
+              Create workspaces to keep your tabs organized and your browsing
+              experience clutter-free.
+            </p>
             <img src="/workspaces.png" className="mt-8 w-full h-full" />
           </div>
         </div>
         <div className="w-full lg:mr-4 flex flex-col">
           <div className="bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Profile switching</h1>
-            <p className="text-muted-foreground mt-3">Switch between profiles to keep your work and personal browsing separate.</p>
+            <p className="text-muted-foreground mt-3">
+              Switch between profiles to keep your work and personal browsing
+              separate.
+            </p>
             <img src="/profiles.png" className="mt-8 w-full h-full" />
           </div>
           <div className="bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Side web panels</h1>
-            <p className="text-muted-foreground mt-3">Access your favorite websites and services without leaving the page you're on.</p>
+            <p className="text-muted-foreground mt-3">
+              Access your favorite websites and services without leaving the
+              page you're on.
+            </p>
             <img src="/sidebar.png" className="mt-8 w-full h-full" />
           </div>
         </div>
       </div>
-      <ShineBorder borderWidth={2} borderRadius={12} color={['#A07CFE', '#FE8FB5', '#FFBE7B']} className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl">
+      <ShineBorder
+        borderWidth={2}
+        borderRadius={12}
+        color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+        className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
+      >
         <div className="w-full p-16">
           <Table>
             <TableHeader>
               <TableRow className="!border-none">
-                <TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">How Zen differs from other browsers</TableHead>
-                <TableHead className="py-2 font-bold text-center"><img src="/favicon.ico" className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8" />Zen</TableHead>
-                <TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60"><img src="/floorp.png" className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7" />Floorp</TableHead>
-                <TableHead className="py-2 pl-0 font-bold text-center opacity-60"><img src="/librewolf.png" className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7" />LibreWolf</TableHead>
+                <TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">
+                  How Zen differs from other browsers
+                </TableHead>
+                <TableHead className="py-2 font-bold text-center">
+                  <img
+                    src="/favicon.ico"
+                    className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8"
+                  />
+                  Zen
+                </TableHead>
+                <TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60">
+                  <img
+                    src="/floorp.png"
+                    className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7"
+                  />
+                  Floorp
+                </TableHead>
+                <TableHead className="py-2 pl-0 font-bold text-center opacity-60">
+                  <img
+                    src="/librewolf.png"
+                    className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7"
+                  />
+                  LibreWolf
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               <TableRow>
-                <TableCell className="py-3 font-medium">Contain fine-grained security measures like sandboxing</TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
-                <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
+                <TableCell className="py-3 font-medium">
+                  Contain fine-grained security measures like sandboxing
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
+                <TableCell className="py-3 pl-4 pr-0">
+                  <Cross />
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="py-3 font-medium">Optimized for peak performance</TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
-                <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
-                <TableCell className="py-3"><Cross /></TableCell>
+                <TableCell className="py-3 font-medium">
+                  Optimized for peak performance
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
+                <TableCell className="py-3 pl-4 pr-0">
+                  <Cross />
+                </TableCell>
+                <TableCell className="py-3">
+                  <Cross />
+                </TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
-                <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
+                <TableCell className="py-3 font-medium">
+                  Based on the latest version of Firefox
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
+                <TableCell className="py-3 pl-4 pr-0">
+                  <Cross />
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="py-3 font-medium">Customizable with cutting-edge features</TableCell>
-                <TableCell className="py-3"><Checkmark /></TableCell>
-                <TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
-                <TableCell className="py-3"><Cross /></TableCell>
+                <TableCell className="py-3 font-medium">
+                  Customizable with cutting-edge features
+                </TableCell>
+                <TableCell className="py-3">
+                  <Checkmark />
+                </TableCell>
+                <TableCell className="py-3 pl-4 pr-0">
+                  <Checkmark />
+                </TableCell>
+                <TableCell className="py-3">
+                  <Cross />
+                </TableCell>
               </TableRow>
             </TableBody>
           </Table>
@@ -105,23 +185,44 @@ export default function Features() {
       </ShineBorder>
       <div className="my-40 w-full flex items-center justify-center flex-col">
         <h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
-        <p className="text-muted-foreground text-center mt-3 w-1/2">Zen Browser is packed with features that will change the way you browse the web. Download it today and experience a new way to browse the web.</p>
+        <p className="text-muted-foreground text-center mt-3 w-1/2">
+          Zen Browser is packed with features that will change the way you
+          browse the web. Download it today and experience a new way to browse
+          the web.
+        </p>
         <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
-          <FeatureCard title="Beautifully designed"
-              description="Zen is designed to be easy to use and beautiful to look at." />
-          <FeatureCard title="Customizable"
-              description="Customize Zen to fit your needs. Change the theme, layout, and more." />
-          <FeatureCard title="Workspaces"
-              description="Create workspaces to keep your tabs organized." />
-          <FeatureCard title="Better new tab page"
-              description="The new tab page in Zen is designed to help you get to your favorite websites faster." />
-          <FeatureCard title="Tab groups"
-              description="Organize your tabs into groups to keep your browsing experience organized."
-              todo />
-          <FeatureCard title="Vertical tabs"
-              description="Keep your tabs organized with vertical tabs." />
+          <FeatureCard
+            title="Beautifully designed"
+            description="Zen is designed to be easy to use and beautiful to look at."
+          />
+          <FeatureCard
+            title="Customizable"
+            description="Customize Zen to fit your needs. Change the theme, layout, and more."
+          />
+          <FeatureCard
+            title="Workspaces"
+            description="Create workspaces to keep your tabs organized."
+          />
+          <FeatureCard
+            title="Better new tab page"
+            description="The new tab page in Zen is designed to help you get to your favorite websites faster."
+          />
+          <FeatureCard
+            title="Tab groups"
+            description="Organize your tabs into groups to keep your browsing experience organized."
+            todo
+          />
+          <FeatureCard
+            title="Vertical tabs"
+            description="Keep your tabs organized with vertical tabs."
+          />
         </div>
-        <Button onClick={() => window.location.href = "/download"} className="mt-8">Download Zen Browser</Button>
+        <Button
+          onClick={() => (window.location.href = "/download")}
+          className="mt-8"
+        >
+          Download Zen Browser
+        </Button>
       </div>
     </div>
   );

src/components/mode-toggle.tsx

@@ -1,34 +1,26 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
-import { Button } from './ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu'
+import * as React from "react";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
 
 export function ModeToggle() {
-   const { setTheme } = useTheme()
-
-   return (
-      <DropdownMenu>
-         <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="size-8 px-0">
-               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-               <span className="sr-only">Toggle theme</span>
-            </Button>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setTheme('light')}>
-               Light
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('dark')}>
-               Dark
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('system')}>
-               System
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
-}
+  const { theme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+  return (
+    <Button variant="ghost" size="icon" onClick={toggleTheme}>
+      <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <MoonIcon 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/ui/button.tsx

@@ -1,57 +1,57 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
 
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
 
 const buttonVariants = cva(
-   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-   {
-      variants: {
-         variant: {
-            default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-            destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-            outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-            secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
-         },
-         size: {
-            default: 'h-9 px-4 py-2',
-            sm: 'h-8 rounded-md px-3 text-xs',
-            lg: 'h-10 rounded-md px-8',
-            icon: 'h-9 w-9',
-         },
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground ",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
-      defaultVariants: {
-         variant: 'default',
-         size: 'default',
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
       },
-   },
-)
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
-   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-   VariantProps<typeof buttonVariants> {
-   asChild?: boolean
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-   ({ className, variant, size, asChild = false, ...props }, ref) => {
-      const Comp = asChild ? Slot : 'button'
-      return (
-         <Comp
-            className={ny(buttonVariants({ variant, size, className }))}
-            ref={ref}
-            {...props}
-         />
-      )
-   },
-)
-Button.displayName = 'Button'
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={ny(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };