ui(nextjs): update ui & fix typo

macojaune · Jan 15, 2025 · bd654ae · bd654ae
1 parent e52805d
commit bd654ae
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,11 +53,3 @@ dist/
 
 .idea
 .vscode
-
-apps/expo/google-services.json
-
-apps/expo/google-service-account.json
-
-apps/expo/credentials.json
-
-apps/expo/credentials/
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -33,6 +33,7 @@
     "mapbox-gl": "^3.9.1",
     "marked": "^15.0.5",
     "next": "^14.2.21",
+    "next-themes": "^0.4.3",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
     "superjson": "2.2.1",

diff --git a/apps/nextjs/public/favicon.ico b/apps/nextjs/public/favicon.ico
diff --git a/apps/nextjs/public/t3-icon.svg b/apps/nextjs/public/t3-icon.svg
diff --git a/apps/nextjs/src/app/_components/map/navigation-bar.tsx b/apps/nextjs/src/app/_components/map/navigation-bar.tsx
@@ -1,11 +1,9 @@
 "use client"
 
-import { Dispatch, SetStateAction } from "react"
 import Link from "next/link"
-import { Menu, Search } from "lucide-react"
+import { Menu } from "lucide-react"
 
 import { Button } from "@oyo/ui/button"
-import { Input } from "@oyo/ui/input"
 import { ThemeToggle } from "@oyo/ui/theme"
 
 export function NavigationBar({
@@ -31,8 +29,8 @@ export function NavigationBar({
           {/* <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input placeholder="Rechercher un groupe..." className="pl-9" />
-          </div>
-          <ThemeToggle />*/}
+          </div>*/}
+          <ThemeToggle />
         </div>
       </div>
     </header>

diff --git a/apps/nextjs/src/app/globals.css b/apps/nextjs/src/app/globals.css
@@ -4,21 +4,21 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --background: "rgb(239, 232, 221)";
+    --foreground: "rgb(36, 40, 43)";
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 327 66% 69%;
+    --primary: "rgb(94, 23, 235)";
     --primary-foreground: 337 65.5% 17.1%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72.22% 50.59%;
+    --destructive: "rgb(223, 56, 33)";
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
@@ -27,21 +27,21 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    --background: "rgb(36, 40, 43)";
+    --foreground: "rgb(239, 232, 221)";
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 264 82% 56%;
-    --primary-foreground: 337 65.5% 17.1%;
+    --primary: "rgb(94, 23, 235)";
+    --primary-foreground: "rgb(119, 51, 255)";
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --destructive: "rgb(223, 56, 33)";
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -4,7 +4,7 @@ import { GeistMono } from "geist/font/mono"
 import { GeistSans } from "geist/font/sans"
 
 import { cn } from "@oyo/ui"
-import { ThemeProvider, ThemeToggle } from "@oyo/ui/theme"
+import { ThemeProvider } from "@oyo/ui/theme"
 import { Toaster } from "@oyo/ui/toast"
 
 import { TRPCReactProvider } from "~/trpc/react"

diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
@@ -1,24 +1,25 @@
+"use client"
+
 import Image from "next/image"
 import Link from "next/link"
 import { MapPin, Navigation, Share2 } from "lucide-react"
+import { useTheme } from "next-themes"
 
 import { Button } from "@oyo/ui/button"
 import { Card } from "@oyo/ui/card"
-
-import { api, HydrateClient } from "~/trpc/server"
-
-// export const runtime = "edge";
+import { ThemeToggle } from "@oyo/ui/theme"
 
 export default function HomePage() {
   // You can await this here if you don't want to show Suspense fallback below
   // void api.post.all.prefetch()
-
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
   return (
     // <HydrateClient>
     <main className="min-h-screen">
-      {/* <div className="fixed bottom-4 right-4 z-10">
-          <ThemeToggle />
-        </div> */}
+      <div className="fixed bottom-4 right-4 z-10">
+        <ThemeToggle />
+      </div>
       <section className="relative flex h-screen items-center justify-center overflow-hidden">
         <div className="absolute inset-0 z-0">
           <Image
@@ -28,13 +29,6 @@ export default function HomePage() {
             height={1638}
             className="object-cover object-center"
           />
-          {/* <div
-              className="absolute inset-0 bg-cover bg-center"
-              style={{
-                backgroundImage:
-                  'url("https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&q=80")',
-              }}
-            /> */}
           <div className="absolute inset-0 bg-gradient-to-b from-purple-900/60 to-purple-900/80 backdrop-blur-sm" />
         </div>
         <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
@@ -48,31 +42,16 @@ export default function HomePage() {
             Ne manquez plus aucun groupe grâce à la géolocalisation en direct
           </p>
           <Link href="/map">
-            <Button size="lg" className="text-white">
+            <Button
+              size="lg"
+              variant={isDark ? "primary" : "secondary"}
+              className="dark:text-white"
+            >
               Voir la carte
             </Button>
           </Link>
         </div>
       </section>
-      {/* <div className="flex flex-col items-center justify-center gap-4 py-16">
-          <AuthShowcase />
-          <CreatePostForm />
-          <div className="w-full max-w-2xl overflow-y-scroll">
-            <Suspense
-              fallback={
-                <div className="flex w-full flex-col gap-4">
-                  <PostCardSkeleton />
-                  <PostCardSkeleton />
-                  <PostCardSkeleton />
-                </div>
-              }
-            >
-              <PostList />
-            </Suspense>
-          </div>
-        </div> */}
-      {/* Hero Section */}
-
       {/* How it Works Section */}
       <section className="py-20">
         <div className="container mx-auto flex flex-col items-center gap-16 px-4">
@@ -91,7 +70,7 @@ export default function HomePage() {
                 icon: <Navigation className="h-12 w-12 text-purple-600" />,
                 title: "Suivez les déplacements",
                 description:
-                  "Sélectionne tes groupes préférés et suis leurs parcours endirect",
+                  "Sélectionne tes groupes préférés et suis leurs parcours en direct",
               },
               {
                 icon: <Share2 className="h-12 w-12 text-purple-600" />,
@@ -111,7 +90,11 @@ export default function HomePage() {
             ))}
           </div>
           <Link href="/map">
-            <Button size="lg" variant="outline" className="text-white">
+            <Button
+              size="lg"
+              variant={!isDark ? "primary" : "outline"}
+              className="dark:text-white"
+            >
               <MapPin className="mr-2 h-6 w-6" />
               Accède à la carte
             </Button>
@@ -120,21 +103,15 @@ export default function HomePage() {
       </section>
 
       {/* Pour les Membres Section */}
-      <section className="py-20">
+      <section className="bg-secondary py-20 dark:bg-secondary-foreground">
         <div className="absolute inset-0 z-0">
-          <div
-            className="absolute inset-0 bg-cover bg-center"
-            style={{
-              backgroundImage:
-                'url("https://images.unsplash.com/photo-1581974944026-5d6ed762f617?auto=format&fit=crop&q=80")',
-            }}
-          />
+          <div className="absolute inset-0 bg-cover bg-center" />
           <div className="absolute inset-0 bg-gradient-to-b from-purple-900/80 to-purple-900/90 backdrop-blur-sm" />
         </div>
 
         <div className="container relative z-10 mx-auto px-4 text-center">
           <div className="mx-auto max-w-3xl text-center">
-            <h2 className="mb-4 text-4xl font-bold">Carvanavalier·e ?</h2>
+            <h2 className="mb-4 text-4xl font-bold">Carnavalier·e ?</h2>
             <p className="mb-8 text-xl text-gray-400">
               Télécharge l'application et partage la position de ton groupe en
               direct.

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml