Merge pull request #6 from Pratyay360/themetoggle

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,22 +12,28 @@ 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() {
@@ -41,29 +46,46 @@ export default function Features() {
         <div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
           <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md: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="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md: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="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md: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="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md: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>
@@ -80,28 +102,60 @@ export default function Features() {
             </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>
@@ -109,7 +163,11 @@ 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." />
@@ -125,7 +183,12 @@ export default function Features() {
           <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()
-
+  const { theme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
   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" />
+    <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>
-         </DropdownMenuTrigger>
-         <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setTheme('light')}>
-               Light
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('dark')}>
-               Dark
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme('system')}>
-               System
-            </DropdownMenuItem>
-         </DropdownMenuContent>
-      </DropdownMenu>
-   )
+  );
 }

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',
+  "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',
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          "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',
+          "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',
+          "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',
+        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',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-   asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-      const Comp = asChild ? Slot : 'button'
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={ny(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-      )
+    );
   },
-)
-Button.displayName = 'Button'
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };