feat: enhance Home page with post loading and new post functionality

Author: ifalfahri

src/app/page.tsx

@@ -1,9 +1,24 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
+import { KeluhCard } from '@/components/keluh-card';
+import { KeluhAdd } from '@/components/keluh-add';
+import { getPosts } from '@/lib/storage';
 import { MessageSquarePlus } from 'lucide-react';
+import { KeluhPost } from './types';
 
 export default function Home() {
+  const [posts, setPosts] = useState<KeluhPost[]>([]);
+  const [isNewPostOpen, setIsNewPostOpen] = useState(false);
+
+  const loadPosts = () => {
+    setPosts(getPosts());
+  };
+
+  useEffect(() => {
+    loadPosts();
+  }, []);
 
   return (
     <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
@@ -13,15 +28,34 @@ export default function Home() {
             Keluh Kesah
           </h1>
           <p className="text-muted-foreground text-center mb-6">
-            Silahkan berkeluh kesah di sini sepuasnya.
+            Silahkan berkeluh kesah di sini.
           </p>
           <Button
             size="lg"
+            onClick={() => setIsNewPostOpen(true)}
           >
             <MessageSquarePlus className="w-5 h-5" />
-            Keluhan Baru
+            Tambah Keluhan
           </Button>
         </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-7xl mx-auto">
+          {posts.map((post) => (
+            <KeluhCard key={post.id} post={post} onUpdate={loadPosts} />
+          ))}
+        </div>
+
+        {posts.length === 0 && (
+          <div className="text-center text-muted-foreground mt-8">
+            Belum ada yang ngeluh nih. Yuk mulai ngeluh!
+          </div>
+        )}
+
+        <KeluhAdd
+          open={isNewPostOpen}
+          onOpenChange={setIsNewPostOpen}
+          onPostCreated={loadPosts}
+        />
       </div>
     </main>
   );