feat(client): add user hover card for post component

client/components/app/HoverCard/index.jsx

@@ -0,0 +1,32 @@
+import { CalendarFold } from 'lucide-react';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
+
+export default function UserHoverCard({ user }) {
+  return (
+    <HoverCard>
+      <HoverCardTrigger className='text-sm hover:underline'>{user.name}</HoverCardTrigger>
+      <HoverCardContent className='flex flex-col'>
+        <div className='flex items-start'>
+          <div className='mr-3 w-10 h-10 rounded-lg bg-zinc-800'></div>
+          <div className='flex flex-col'>
+            <div className='text-sm'>{user.name}</div>
+            <div className='text-xs text-zinc-400'>@{user.username}</div>
+          </div>
+        </div>
+        <div className='mt-3'>
+          <div className='text-sm mb-2'>{user.about}</div>
+          <div className='text-xs'>
+            <div className='text-zinc-400 flex items-center mb-0.5'>
+              <CalendarFold className='w-4 h-4 mr-1' />
+              {new Date(user.created_at.T * 1000).toLocaleDateString('tr-TR', { year: 'numeric', month: 'long', day: 'numeric' })}
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

client/components/app/Post/index.jsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useToast } from '@/components/ui/use-toast';
+import UserHoverCard from '@/components/app/HoverCard';
 import { deletePost, likePost } from '@/lib/api/posts';
 import useAuthStore from '@/stores/auth';
 import Link from 'next/link';
@@ -86,7 +87,7 @@ export default function Post({ post: initialPost, onDelete }) {
           <div className='flex flex-col mr-2'>
             {post ? (
               <>
-                <div className='text-sm'>{post.author.name}</div>
+                <UserHoverCard user={post.author} />
                 <div className='text-xs text-zinc-400'>@{post.author.username}</div>
               </>
             ) : (

client/components/ui/hover-card.jsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

client/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

server/handlers/posts/create_post.go

@@ -28,7 +28,6 @@ func CreatePost(c *fiber.Ctx) error {
 
 	user.Email = ""
 	user.Password = ""
-	user.About = ""
 
 	post := models.Post{
 		Author:  user,

server/models/user.go

@@ -22,7 +22,7 @@ type User struct {
 	Name      string              `bson:"name" json:"name"`
 	Username  string              `bson:"username" json:"username"`
 	Password  string              `bson:"password,omitempty" json:"password,omitempty"`
-	About     string              `bson:"about,omitempty" json:"about,omitempty"`
+	About     string              `bson:"about" json:"about,omitempty"`
 }
 
 type AuthStatus struct {