StatusUpdate

1"use client";
2
3import { Card } from "@/components/ui/card";
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5import { Button } from "@/components/ui/button";
6import { Separator } from "@/components/ui/separator";
7import { MoreHorizontal, Heart, MessageCircle, Share2, Bookmark, ImageIcon } from "lucide-react";
8import { useState } from "react";
9
10export default function StatusUpdate() {
11  const [liked, setLiked] = useState(false);
12  const [likeCount, setLikeCount] = useState(42);
13  const [bookmarked, setBookmarked] = useState(false);
14
15  const handleLike = () => {
16    setLiked(!liked);
17    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
18  };
19
20  return (
21    <Card className="w-full max-w-lg">
22      <div className="p-4">
23        <div className="flex items-start justify-between">
24          <div className="flex items-center gap-3">
25            <Avatar className="w-10 h-10">
26              <AvatarImage src="https://i.pravatar.cc/150?img=12" />
27              <AvatarFallback>JD</AvatarFallback>
28            </Avatar>
29            <div>
30              <div className="flex items-center gap-2">
31                <span className="font-semibold">John Doe</span>
32                <span className="text-muted-foreground text-sm">@johndoe</span>
33              </div>
34              <span className="text-xs text-muted-foreground">2h ago</span>
35            </div>
36          </div>
37          <Button variant="ghost" size="sm">
38            <MoreHorizontal className="w-4 h-4" />
39          </Button>
40        </div>
41        <p className="mt-3 text-sm leading-relaxed">
42          Just finished working on an exciting new project! Can't wait to share more details soon. 
43          The team has been putting in so much effort and it's finally coming together. 🚀
44        </p>
45        <div className="grid grid-cols-2 gap-2 mt-4">
46          {[1, 2, 3, 4].map((i) => (
47            <div key={i} className="aspect-square rounded-lg bg-muted flex items-center justify-center">
48              <ImageIcon className="w-8 h-8 text-muted-foreground/50" />
49            </div>
50          ))}
51        </div>
52      </div>
53      <Separator />
54      <div className="p-2">
55        <div className="flex items-center justify-between">
56          <Button
57            variant="ghost"
58            size="sm"
59            onClick={handleLike}
60            className={`gap-2 ${liked ? "text-red-500" : ""}`}
61          >
62            <Heart className={`w-4 h-4 ${liked ? "fill-current" : ""}`} />
63            <span>{likeCount}</span>
64          </Button>
65          <Button variant="ghost" size="sm" className="gap-2">
66            <MessageCircle className="w-4 h-4" />
67            <span>12</span>
68          </Button>
69          <Button variant="ghost" size="sm" className="gap-2">
70            <Share2 className="w-4 h-4" />
71            <span>Share</span>
72          </Button>
73          <Button
74            variant="ghost"
75            size="sm"
76            onClick={() => setBookmarked(!bookmarked)}
77          >
78            <Bookmark className={`w-4 h-4 ${bookmarked ? "fill-current" : ""}`} />
79          </Button>
80        </div>
81      </div>
82    </Card>
83  );
84}