Merge pull request #27 from ledevmacedo/dark-mode

Dark mode

app/layout.tsx

@@ -3,7 +3,6 @@ import { ViewTransitions } from 'next-view-transitions'
 import { Toaster } from 'sonner'
 import localFont from 'next/font/local'
 import NextTopLoader from 'nextjs-toploader'
-
 import './globals.css'
 
 import AllProviders from '@/providers'

components/header/index.tsx

@@ -18,23 +18,24 @@ import { FaXTwitter } from 'react-icons/fa6'
 
 import Logo from '@/assets/logo.svg'
 import { usePathname } from 'next/navigation'
+import { ThemeSwitch } from '../ui/theme-switch'
 
 type Tabs = {
   name: string
   href: string
   isNewTab?: boolean
   variant:
-    | 'default'
-    | 'destructive'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link'
-    | 'arrow'
-    | 'smile'
-    | 'linkHover2'
-    | null
-    | undefined
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link'
+  | 'arrow'
+  | 'smile'
+  | 'linkHover2'
+  | null
+  | undefined
   className?: string
   isUpdated?: boolean
 }
@@ -57,11 +58,11 @@ export default function Header() {
 
   return (
     <header className="max-w-5xl mx-auto flex justify-between items-center my-5 px-5 lg:px-0">
-      <Link href="/" className="cursor-pointer md:hidden">
+      <Link href="/" className="cursor-pointer md:hidden dark:bg-white dark:rounded-lg p-2">
         <Logo className="w-9 h-9" />
       </Link>
       <nav className="hidden md:flex items-center gap-3">
-        <Link href="/" className="cursor-pointer">
+        <Link href="/" className="cursor-pointer dark:bg-white dark:rounded-lg p-1">
           <Logo className="w-9 h-9" />
         </Link>
         {tabs.map((tab, i) => (
@@ -96,7 +97,7 @@ export default function Header() {
         <Link href="/playground">
           <Button
             variant="gooeyLeft"
-            className="g-primary text-white rounded-full px-4"
+            className="g-primary rounded-full px-4"
           >
             Playground
           </Button>
@@ -114,6 +115,7 @@ export default function Header() {
             <FaXTwitter className="text-lg" />
           </Button>
         </Link>
+        <ThemeSwitch />
       </div>
 
       <nav className="md:hidden">
@@ -142,6 +144,7 @@ export default function Header() {
                       <FaXTwitter className="text-lg" />
                     </Button>
                   </Link>
+                  <ThemeSwitch />
                 </div>
 
                 {tabs.map((tab) => (
@@ -157,7 +160,7 @@ export default function Header() {
                   </DrawerClose>
                 ))}
                 <Link href="/playground">
-                  <Button className="w-full bg-primary text-white px-2">
+                  <Button className="w-full bg-primary  px-2">
                     Playground
                   </Button>
                 </Link>

components/sections/logos.tsx

@@ -48,17 +48,17 @@ export default function Logos() {
           BUILD WITH USING
         </h3>
         <div className="relative mt-6">
-          <Marquee className="max-w-full [--duration:40s]">
+          <Marquee className="max-w-full [--duration:40s] ">
             {companies.map((item) => (
               <div
                 key={item.name}
-                className="h-10 w-40 dark:brightness-0 dark:invert grayscale opacity-30 flex items-center gap-1"
+                className="h-10 w-40 grayscale opacity-30 flex items-center gap-1"
               >
                 <Image
                   width={112}
                   height={40}
                   src={`https://avatars.githubusercontent.com/u/${item.img}`}
-                  className="h-8 w-8 rounded"
+                  className="h-8 w-8 rounded "
                   alt={item.name}
                 />
                 <p className="text-sm whitespace-nowrap">{item.name}</p>

components/ui/badge.tsx

@@ -14,6 +14,7 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        new: "border-transparent bg-yellow-200 font-normal hover:bg-yellow-200/80 rounded dark:text-primary-foreground",
         outline: "text-foreground",
       },
     },
@@ -25,7 +26,7 @@ const badgeVariants = cva(
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  VariantProps<typeof badgeVariants> { }
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (

components/ui/button.tsx

@@ -65,7 +65,7 @@ interface IconRefProps {
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 

components/ui/theme-switch.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeSwitch() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon" className="rounded-full">
+                    <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>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

providers/index.tsx

@@ -6,7 +6,7 @@ import { PostHogProvider } from 'posthog-js/react'
 import { GoogleAnalytics } from '@next/third-parties/google'
 import { OpenPanelComponent } from '@openpanel/nextjs'
 import { Analytics } from '@vercel/analytics/react'
-
+import { ThemeProvider } from './theme-provider'
 const AllProviders = ({ children }: { children: ReactNode }) => {
   if (typeof window !== 'undefined') {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
@@ -16,7 +16,14 @@ const AllProviders = ({ children }: { children: ReactNode }) => {
 
   return (
     <PostHogProvider client={posthog}>
-      {children}
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        {children}
+      </ThemeProvider>
       <Analytics />
       <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ''} />
       <OpenPanelComponent

providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+    children,
+    ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

screens/field-selector/index.tsx

@@ -4,6 +4,7 @@ import { fieldTypes } from '@/constants'
 import { Button } from '@/components/ui/button'
 import If from '@/components/ui/if'
 import Link from 'next/link'
+import { Badge } from '@/components/ui/badge'
 
 type FieldSelectorProps = {
   addFormField: (variant: string, index?: number) => void
@@ -27,18 +28,18 @@ export const FieldSelector: React.FC<FieldSelectorProps> = ({
             <If
               condition={variant.isNew}
               render={() => (
-                <div className="md:hidden ml-1 text-[10px] p-1 bg-yellow-200 rounded">
+                <Badge variant={'new'} className='md:hidden ml-1 p-1 text-[10px]'>
                   New
-                </div>
+                </Badge>
               )}
             />
           </Button>
           <If
             condition={variant.isNew}
             render={() => (
-              <div className="hidden md:block ml-1 text-[10px] p-1 bg-yellow-200 rounded">
+              <Badge variant={'new'} className='hidden md:block ml-1 p-1 text-[10px]'>
                 New
-              </div>
+              </Badge>
             )}
           />
         </div>

screens/form-builder/index.tsx

@@ -41,12 +41,12 @@ export default function FormBuilder() {
       disabled: false,
       label: label || newFieldName,
       name: newFieldName,
-      onChange: () => {},
-      onSelect: () => {},
+      onChange: () => { },
+      onSelect: () => { },
       placeholder: placeholder || 'Placeholder',
       required: true,
       rowIndex: index,
-      setValue: () => {},
+      setValue: () => { },
       type: '',
       value: '',
       variant,
@@ -140,7 +140,7 @@ export default function FormBuilder() {
                   addFormField(variant, index)
                 }
               />
-              <div className="overflow-y-auto flex-1">
+              <div className="overflow-y-auto flex-1 ">
                 <FormFieldList
                   formFields={formFields}
                   setFormFields={setFormFields}

screens/form-field-list/index.tsx

@@ -4,6 +4,7 @@ import { FormFieldType } from '@/types'
 import { FieldItem } from '@/screens/field-item'
 
 import { LuRows } from 'react-icons/lu'
+import { Badge } from '@/components/ui/badge'
 
 export type FormFieldOrGroup = FormFieldType | FormFieldType[]
 
@@ -40,6 +41,7 @@ export const FormFieldList: React.FC<FormFieldListProps> = ({
 
   return (
     <div className="mt-3 lg:mt-0">
+
       <Reorder.Group
         axis="y"
         onReorder={setFormFields}