⛪️🌴 ↝ Okay, so I think we've got a start on the UI, now to add the ba…

…ckend back

components/Content/DiscussCard.tsx

@@ -0,0 +1,148 @@
+import { AvatarFallback, Avatar, AvatarImage } from "../ui/Avatar";
+import { Button } from "../ui/Button";
+import { Card, CardContent, CardFooter, CardTitle } from "./PostCard";
+// import { Input } from "@/components/ui/input";
+import { Separator } from "@radix-ui/react-separator";
+import { useToast } from "../ui/use-toast";
+import { getMetaData } from "../../lib/helper/str.helper";
+import { Megaphone, MessagesSquare, Share2 } from "lucide-react";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+
+type TProps = {
+  public_id: string;
+  content: string;
+  created_at: string;
+  user?: {
+    name: string;
+    username: string;
+    image: string | null;
+  } | null;
+  anonymous?: {
+    username: string;
+  } | null;
+  _count: {
+    comments: number;
+  };
+};
+
+const CardForum: React.FC<TProps> = ({
+  public_id,
+  content,
+  created_at,
+  user,
+  anonymous,
+  _count,
+}) => {
+  const [reason, setReason] = useState("");
+  const [openReason, setOpenReason] = useState(false);
+  const [response, setResponse] = useState({
+    message: "",
+  });
+
+  const { toast } = useToast();
+
+//   const { mutate: reportPost, isLoading } = trpc.post.reportPost.useMutation();
+
+  useEffect(() => {
+    if (!!response.message) {
+      toast({
+        title: "Notifikasi",
+        description: response.message,
+      });
+
+      setResponse({
+        message: "",
+      });
+    }
+  }, [response]);
+
+  return (
+    <>
+      <div
+        className={`fixed inset-0 bg-white/80 backdrop-blur-md z-20 items-center justify-center ${openReason ? "flex" : "hidden"
+          }`}
+      >
+        <Card>
+          <CardTitle className="font-bold p-4">Apa alasan lo bre ?</CardTitle>
+          <CardContent className="p-4 pt-0">
+            {/* <Input
+              onChange={(e) => setReason(e.target.value)}
+              required
+              autoFocus={true}
+              type="text"
+              placeholder="Jangan panjang panjang..."
+            /> */}
+          </CardContent>
+          <CardFooter className="p-4 pt-0 flex gap-2 justify-between">
+            <Button
+              onClick={() => setOpenReason(false)}
+              className="w-1/2"
+              variant="outline"
+            >
+              Gak Jadi
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+      <Card>
+        <Link href={`/profil/${user?.username}`}>
+          <CardTitle
+            className={`p-4 pb-0 group ${!anonymous && "cursor-pointer"}`}
+          >
+            <div className="flex items-start gap-4">
+              <Avatar className="rounded-md">
+                <AvatarImage src={(user && user.image) ?? ""} />
+                <AvatarFallback className="rounded-md">
+                  {(user && user.name[0].toUpperCase()) ?? "A"}
+                </AvatarFallback>
+              </Avatar>
+              <div className="space-y-1">
+                <h2 className={`${!anonymous && "group-hover:underline"}`}>
+                  {anonymous ? "Anonymous" : user && user.name}
+                </h2>
+                <p
+                  className={`text-foreground/60 ${!anonymous && "group-hover:underline"
+                    }`}
+                >
+                  {anonymous ? anonymous.username : user && user.username}
+                </p>
+              </div>
+            </div>
+          </CardTitle>
+        </Link>
+        <CardContent className="p-4 pt-2">
+          <div>
+            <small className="text-foreground/60 text-sm">
+              Metadata {getMetaData(created_at)}
+            </small>
+          </div>
+          <p className="mt-1 break-all">{content}</p>
+        </CardContent>
+        <CardFooter className="p-0 flex-col items-start pb-2">
+          <Separator className="mb-2" />
+          <div className="space-x-2 px-4 py-2">
+            <Link href={`/forum/${public_id}`}>
+              <Button variant="outline" size="default" className="space-x-2">
+                <MessagesSquare className="w-5 aspect-square" />
+                <span>{_count.comments}</span>
+              </Button>
+            </Link>
+            <Button variant="outline" size="icon">
+              <Share2 className="w-5 aspect-square" />
+            </Button>
+            <Button
+              onClick={() => setOpenReason(true)}
+              variant="destructive"
+              size="icon"
+            >
+              <Megaphone className="w-5 aspect-square" />
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};
+
+export default CardForum;

components/Content/PostCard.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+
+import { cn } from "../../lib/uitls";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

components/Core/BottomBar.tsx

@@ -3,47 +3,54 @@ import { useRouter } from "next/router";
 
 const bottombarLinks = [
   {
-    imgURL: "/assets/icons/home.svg",
+    imgURL: "home.svg",
     route: "/",
-    label: "Home",
+    label: "Feed",
   },
   {
-    imgURL: "/assets/icons/wallpaper.svg",
-    route: "/explore",
-    label: "Explore",
+    imgURL: "planet.svg",
+    route: "/garden",
+    label: "Garden",
   },
   {
-    imgURL: "/assets/icons/bookmark.svg",
+    imgURL: "eagle.svg",
     route: "/saved",
-    label: "Saved",
+    label: "Explore",
+  },
+  {
+    imgURL: "rover.svg",
+    route: "/create-post",
+    label: "Gather",
   },
   {
-    imgURL: "/assets/icons/gallery-add.svg",
+    imgURL: "satellite.svg",
     route: "/create-post",
-    label: "Create",
+    label: "Missions",
   },
 ];
 
 const Bottombar = () => {
   const { pathname } = useRouter();
 
   return (
-    <section className="bottom-bar flex justify-between p-4 bg-white fixed bottom-0 left-0 w-full">
+    <section className="bottom-bar flex justify-between items-center p-4 bg-white fixed bottom-0 left-0 w-full border-t">
       {bottombarLinks.map((link) => {
         const isActive = pathname === link.route;
         return (
-          <Link legacyBehavior key={`bottombar-${link.label}`} href={link.route}>
+          <Link legacyBehavior key={`bottombar-${link.label}`} href={link.route} passHref>
             <a className={`${
               isActive && "rounded-[10px] bg-primary-500 "
-            } flex-center flex-col gap-1 p-2 transition`}>
+            } flex flex-col items-center justify-center p-2 transition`}>
               <img
                 src={link.imgURL}
                 alt={link.label}
-                width={16}
-                height={16}
-                className={`${isActive && "invert-white"}`}
+                width={24} 
+                height={24}
+                className={`mb-1 ${isActive ? "invert-white" : "text-light-2"}`}
               />
-              <p className="tiny-medium text-light-2">{link.label}</p>
+              <p className={`tiny-medium ${isActive ? "text-light-3" : "text-light-2"}`}>
+                {link.label}
+              </p>
             </a>
           </Link>
         );
@@ -52,4 +59,4 @@ const Bottombar = () => {
   );
 };
 
-export default Bottombar;
+export default Bottombar;