feat: add new logo and implement Wibu Mode toggle in Navbar and updat…

…e Home page layout
ifalfahri · Jan 12, 2025 · f1fa45f · f1fa45f
1 parent 6c754e6
commit f1fa45f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/public/keluhkesah.png b/public/keluhkesah.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,18 +4,18 @@ import { KeluhAdd } from "@/components/keluh-add";
 import { KeluhCard } from "@/components/keluh-card";
 import { Button } from "@/components/ui/button";
 import { InteractiveGridPattern } from "@/components/ui/interactive-grid-pattern";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { getPosts } from "@/lib/storage";
 import { cn } from "@/lib/utils";
 import { MessageSquarePlus } from "lucide-react";
 import { useEffect, useState } from "react";
 import { KeluhPost } from "./types";
 import { Navbar } from "@/components/ui/navbar";
+import Image from "next/image";
 
 export default function Home() {
   const [posts, setPosts] = useState<KeluhPost[]>([]);
   const [isNewPostOpen, setIsNewPostOpen] = useState(false);
+  const [isWibuMode, setIsWibuMode] = useState(false);
 
   const loadPosts = async () => {
     const posts = await getPosts();
@@ -37,21 +37,26 @@ export default function Home() {
         squares={[80, 80]}
         squaresClassName="hover:fill-main"
       />
-      <Navbar />
+      <Navbar isWibuMode={isWibuMode} setIsWibuMode={setIsWibuMode} />
       <div className="container mx-auto px-4 py-8 pt-24">
         <div className="flex items-center space-x-2 justify-center mb-6">
-          <Switch id="wibu-mode" className="z-10" />
-          <Label htmlFor="wibu-mode" className="z-10">
-            Wibu Mode
-          </Label>
+
         </div>
         <div className="flex flex-col items-center mb-12">
-          <h1 className="relative z-10 text-4xl font-black text-center mb-4">
-            Keluh Kesah
-          </h1>
-          <p className="relative z-10 text-muted-foreground text-center mb-6">
-            Silahkan berkeluh kesah di sini.
-          </p>
+        {isWibuMode ? (
+            <div className="z-10 mb-7 -mt-2">
+              <Image src="/keluhkesah.png" alt="Keluh Kesah Logo" width={400} height={400} className="w-80 sm:w-96" unoptimized />
+            </div>
+          ) : (
+            <div>
+              <h1 className="relative z-10 text-4xl font-black text-center mb-4">
+                Keluh Kesah
+              </h1>
+              <p className="relative z-10 text-muted-foreground text-center mb-6">
+                Silahkan berkeluh kesah di sini.
+              </p>
+            </div>
+          )}
           <Button
             className="relative z-10"
             size="lg"

diff --git a/src/components/ui/navbar.tsx b/src/components/ui/navbar.tsx
@@ -3,14 +3,26 @@ import { ModeToggle } from '@/components/mode-toggle'
 import Link from 'next/link'
 import { Github } from 'lucide-react'
 import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogTrigger } from './dialog'
+import Image from 'next/image'
+import { Switch } from './switch'
+import { Label } from './label'
 
+interface NavbarProps {
+    isWibuMode: boolean;
+    setIsWibuMode: (value: boolean) => void;
+  }
 
-export const Navbar = () => {
+  export const Navbar = ({ isWibuMode, setIsWibuMode }: NavbarProps) => {
     return (
         <nav className="fixed top-0 right-0 w-full z-50 border-b-4 border-border bg-bg">
         <div className="container mx-auto px-4 py-3 flex justify-between items-center">
+        {isWibuMode ? (
+          <Image src="/keluhkesah.png" alt="Keluh Kesah Logo" width={120} height={120} unoptimized />
+        ) : (
           <div className="font-bold text-lg">Keluh Kesah</div>
+        )}
           <div className="flex items-center gap-4">
+
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="neutral">Tentang</Button>
@@ -20,13 +32,20 @@ export const Navbar = () => {
                 <DialogDescription>
                   Keluh Kesah adalah adalah tempat bagi siapa saja untuk mencurahkan isi hati dan berbagi pengalaman. Platform ini dibuat dengan tujuan untuk mengurangi angka stress di Indonesia. (Anjay)
                 </DialogDescription>
+                <div className="flex items-center gap-2">
+                <Switch id="wibu-mode" className="z-10" checked={isWibuMode} onCheckedChange={(checked) => setIsWibuMode(checked)}/>
+          <Label htmlFor="wibu-mode" className="z-10">
+            Wibu Mode
+          </Label>
+                </div>
                 <DialogDescription>
                   Dibuat oleh <Link href="https://ifal.me" className="text-main hover:text-black">Ifal Fahri A</Link>
                 </DialogDescription>
             </DialogContent>
           </Dialog>
             <Link href="https://github.com/ifalfahri/keluhkesah"><Button variant="neutral" className="w-10 h-10"><Github /></Button></Link>
             <ModeToggle />
+
           </div>
         </div>
       </nav>