feat: landing page and dark mode

Author: agmmtoo

app/(protected)/borrows/[id]/page.tsx

@@ -107,8 +107,8 @@ export default async function BorrowDetailsPage({
                   {borrowRes.data.book.title}
                 </h2>
               </Link>
-              <p className="text-gray-600">{borrowRes.data.book.author}</p>
-              <p className="text-sm text-gray-500">
+              <p className="text-foreground/80">{borrowRes.data.book.author}</p>
+              <p className="text-sm text-foreground/60">
                 {borrowRes.data.book.code}
               </p>
             </div>
@@ -325,7 +325,7 @@ export default async function BorrowDetailsPage({
           {borrowRes.data.returning ? (
             <BtnUndoReturn
               variant="outline"
-              className="w-full"
+              className="w-full backdrop-blur-md"
               borrow={borrowRes.data}
             />
           ) : (

app/(protected)/memberships/new/page.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { toast } from '@/components/hooks/use-toast'
+import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -99,17 +99,11 @@ export default function ComboboxForm() {
   function onSubmit(data: z.infer<typeof FormSchema>) {
     createMembership(data)
       .then(() => {
-        toast({
-          title: 'Membership Created',
-        })
+        toast('Membership Created')
         router.push('/memberships')
       })
       .catch((e) => {
-        toast({
-          title: 'Error',
-          description: e?.error,
-          variant: 'destructive',
-        })
+        toast.error(e?.error)
       })
   }
 
@@ -126,10 +120,7 @@ export default function ComboboxForm() {
       name: libQ,
     }).then((res) => {
       if ('error' in res) {
-        toast({
-          title: 'Error',
-          description: res.message,
-        })
+        toast.error(res.message)
         return
       }
       setLibs(res.data)

app/(protected)/subscriptions/new/page.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { toast } from '@/components/hooks/use-toast'
+import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -80,17 +80,11 @@ export default function ComboboxForm() {
     createSubscription(data)
       .then(console.log)
       .then(() => {
-        toast({
-          title: 'Purchased Membership',
-        })
+        toast('Purchased Membership')
         router.push('/subscriptions')
       })
       .catch((e) => {
-        toast({
-          title: 'Error',
-          description: e?.error,
-          variant: 'destructive',
-        })
+        toast.error(e?.error)
       })
   }
 
@@ -107,10 +101,7 @@ export default function ComboboxForm() {
       name: userQ,
     }).then((res) => {
       if ('error' in res) {
-        toast({
-          title: 'Error',
-          description: res.message,
-        })
+        toast.error(res.message)
         return
       }
       setUsers(res.data)
@@ -126,10 +117,7 @@ export default function ComboboxForm() {
       name: libQ,
     }).then((res) => {
       if ('error' in res) {
-        toast({
-          title: 'Error',
-          description: res.message,
-        })
+        toast.error(res.message)
         return
       }
       setLibs(res.data)
@@ -148,10 +136,7 @@ export default function ComboboxForm() {
       library_ids: libID,
     }).then((res) => {
       if ('error' in res) {
-        toast({
-          title: 'Error',
-          description: res.message,
-        })
+        toast.error(res.message)
         return
       }
       setMems(res.data)

app/globals.css

@@ -75,7 +75,7 @@
 /* https://ui.shadcn.com/docs/tailwind-v4 */
 :root {
   --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
+  --foreground: hsla(240, 10%, 4%, 0.955);
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(240 10% 3.9%);
   --popover: hsl(0 0% 100%);
@@ -102,10 +102,10 @@
 }
 
 .dark {
-  --background: hsl(20 14.3% 4.1%);
+  --background: hsl(0 0% 5%);
   --foreground: hsl(0 0% 95%);
-  --card: hsl(24 9.8% 10%);
-  --card-foreground: hsl(0 0% 95%);
+  --card: hsl(0 0% 10%);
+  --card-foreground: hsl(0 0% 85%);
   --popover: hsl(0 0% 9%);
   --popover-foreground: hsl(0 0% 95%);
   --primary: hsl(142.1 70.6% 45.3%);
@@ -116,7 +116,7 @@
   --muted-foreground: hsl(240 5% 64.9%);
   --accent: hsl(12 6.5% 15.1%);
   --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62.8% 30.6%);
+  --destructive: hsl(0, 64%, 46%);
   --destructive-foreground: hsl(0 85.7% 97.3%);
   --border: hsl(240 3.7% 15.9%);
   --input: hsl(240 3.7% 15.9%);

app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata, Viewport } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
 import './globals.css'
-import { Toaster } from '@/components/ui/toaster'
+import { Toaster } from '@/components/ui/sonner'
 import { SITE_DESCRIPTION, SITE_NAME } from '@/lib/consts'
+import { ThemeProvider } from '@/components/theme-provider'
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -57,12 +58,19 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         //  container mx-auto px-4
         className={`${geistSans.variable} ${geistMono.variable} antialiased mx-auto`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
         <Toaster />
 
         <script

app/page.tsx

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button'
 import { IsLoggedIn } from '@/lib/firebase/firebase'
 import Landing from '@/components/landing'
 import { logoutAction } from '@/lib/actions/logout'
+import { ModeToggle } from '@/components/button-toggle-theme'
 
 const menuItems = [
   { title: 'Dashboard', icon: ChartSpline, href: '/dashboard', level: 3 },
@@ -55,9 +56,12 @@ export default async function LibraryDashboard() {
       <div className="max-w-2xl mx-auto space-y-4">
         <div className="flex justify-between items-center">
           <h1 className="text-2xl font-bold">Librarease</h1>
-          <Button variant="ghost" onClick={logoutAction}>
-            Logout
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" onClick={logoutAction}>
+              Logout
+            </Button>
+            <ModeToggle />
+          </div>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {menuItems.map((item) => {

components/books/BookForm.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { toast } from '@/components/hooks/use-toast'
+import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -93,10 +93,7 @@ export const BookForm: React.FC<BookFormProps> = ({
       name: libQ,
     }).then((res) => {
       if ('error' in res) {
-        toast({
-          title: 'Error',
-          description: res.message,
-        })
+        toast.error(res.message)
         return
       }
       setLibs(res.data)

components/books/book-create-form.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import React from 'react'
 import { BookForm, BookFormValues } from './BookForm'
 import { createBook } from '@/lib/api/book'
-import { toast } from '../hooks/use-toast'
+import { toast } from 'sonner'
 
 const initialData: BookFormValues = {
   title: '',
@@ -21,17 +21,11 @@ export const BookCreateForm: React.FC = () => {
     createBook(data)
       .then(console.log)
       .then(() => {
-        toast({
-          title: 'Book Registered',
-        })
+        toast('Book Registered')
         router.push('/books')
       })
       .catch((e) => {
-        toast({
-          title: 'Error',
-          description: e?.error,
-          variant: 'destructive',
-        })
+        toast.error(e?.error)
       })
   }
 

components/borrows/BtnReturnBorrow.tsx

@@ -6,7 +6,7 @@ import { Button } from '../ui/button'
 import { Lock, Unlock, Loader } from 'lucide-react'
 import { returnBorrowAction } from '@/lib/actions/return-borrow'
 import { formatDate } from '@/lib/utils'
-import { toast } from '../hooks/use-toast'
+import { toast } from 'sonner'
 
 export const BtnReturnBook: React.FC<
   React.ComponentProps<typeof Button> & {
@@ -30,11 +30,7 @@ export const BtnReturnBook: React.FC<
       setConfirmTimeout(undefined)
       const res = await returnBorrowAction(borrow.id)
       if ('error' in res) {
-        toast({
-          title: 'Failed to return book',
-          description: res.error,
-          variant: 'destructive',
-        })
+        toast.error(res.error)
         return
       }
       // optimistic update
@@ -44,11 +40,7 @@ export const BtnReturnBook: React.FC<
           returned_at: new Date().toISOString(),
         } as Borrow['returning'],
       }))
-      toast({
-        title: 'Success',
-        description: 'Book returned successfully',
-        variant: 'default',
-      })
+      toast('Book returned successfully')
     })
   }
 

components/borrows/BtnUndoReturn.tsx

@@ -5,7 +5,7 @@ import { useTransition, useState } from 'react'
 import { Button } from '../ui/button'
 import { Lock, Unlock, Loader } from 'lucide-react'
 import { undoReturnAction } from '@/lib/actions/undo-return'
-import { toast } from '../hooks/use-toast'
+import { toast } from 'sonner'
 
 export const BtnUndoReturn: React.FC<
   React.ComponentProps<typeof Button> & {
@@ -29,23 +29,15 @@ export const BtnUndoReturn: React.FC<
       setConfirmTimeout(undefined)
       const res = await undoReturnAction(borrow.id)
       if ('error' in res) {
-        toast({
-          title: 'Failed to undo return book',
-          description: res.error,
-          variant: 'destructive',
-        })
+        toast.error(res.error)
         return
       }
       // optimistic update
       setClientBorrow((prev) => ({
         ...prev,
         returning: undefined,
       }))
-      toast({
-        title: 'Success',
-        description: 'Borrow return undone successfully',
-        variant: 'default',
-      })
+      toast('Borrow return undone successfully')
     })
   }