"use client" import { useState } from "react" import { motion } from "framer-motion" import { MessageSquare, Star, Send, User, Inbox } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" const feedbackGiven = [ { id: 1, to: "Sarah Chen", text: "Great work on the API optimization project. Your attention to detail was impressive.", rating: 5, date: "Jun 10, 2026", initials: "SC" }, { id: 2, to: "Mike Johnson", text: "Thanks for helping debug the login issue so quickly. Really saved the day.", rating: 4, date: "Jun 8, 2026", initials: "MJ" }, { id: 3, to: "Emily Davis", text: "Excellent presentation skills in the sprint review. Very clear communication.", rating: 5, date: "Jun 5, 2026", initials: "ED" }, ] const feedbackReceived = [ { id: 4, from: "Alex Lee", text: "Your code reviews have been thorough and helpful. Keep it up!", rating: 5, date: "Jun 9, 2026", initials: "AL" }, { id: 5, from: "Emily Davis", text: "Thanks for covering my on-call shift last weekend. Very much appreciated.", rating: 4, date: "Jun 7, 2026", initials: "ED" }, { id: 6, from: "James Wilson", text: "The documentation you wrote was excellent. Very clear and well-structured.", rating: 5, date: "Jun 2, 2026", initials: "JW" }, ] export default function Feedback() { const [activeTab, setActiveTab] = useState("given") const [showRequest, setShowRequest] = useState(false) return (

Feedback

Give and receive feedback from your peers.

{showRequest && ( Request Feedback Ask a colleague for their feedback.

Colleague

Context

</div>
                <Button size="sm">Send Request</Button>
              </CardContent>
            </Card>
          </motion.div>
        )}

<motion.div variants={staggerItem}>
          <Tabs defaultValue="given" onValueChange={setActiveTab}>
            <TabsList>
              <TabsTrigger value="given">Given ({feedbackGiven.length})</TabsTrigger>
              <TabsTrigger value="received">Received ({feedbackReceived.length})</TabsTrigger>
            </TabsList>

<TabsContent value="given" className="mt-4 space-y-3">
              <motion.div variants={stagger} initial="hidden" animate="visible">
                {feedbackGiven.map((fb) => (
                  <motion.div key={fb.id} variants={staggerItem}>
                    <Card size="sm">
                      <CardContent className="py-3">
                        <div className="flex items-start gap-3">
                          <Avatar className="size-9">
                            <AvatarFallback className="bg-primary/10 text-xs font-semibold text-primary">{fb.initials}</AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <p className="text-sm font-medium">To: {fb.to}</p>
                              <span className="text-xs text-muted-foreground">{fb.date}</span>
                            </div>
                            <p className="text-sm text-muted-foreground mt-1">{fb.text}</p>
                            <div className="flex items-center gap-0.5 mt-1">
                              {Array.from({ length: 5 }).map((_, i) => (
                                <Star key={i} className={`size-3 ${i < fb.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`} />
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </motion.div>
            </TabsContent>

<TabsContent value="received" className="mt-4 space-y-3">
              <motion.div variants={stagger} initial="hidden" animate="visible">
                {feedbackReceived.map((fb) => (
                  <motion.div key={fb.id} variants={staggerItem}>
                    <Card size="sm">
                      <CardContent className="py-3">
                        <div className="flex items-start gap-3">
                          <Avatar className="size-9">
                            <AvatarFallback className="bg-primary/10 text-xs font-semibold text-primary">{fb.initials}</AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <p className="text-sm font-medium">From: {fb.from}</p>
                              <span className="text-xs text-muted-foreground">{fb.date}</span>
                            </div>
                            <p className="text-sm text-muted-foreground mt-1">{fb.text}</p>
                            <div className="flex items-center gap-0.5 mt-1">
                              {Array.from({ length: 5 }).map((_, i) => (
                                <Star key={i} className={`size-3 ${i < fb.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`} />
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </motion.div>
            </TabsContent>
          </Tabs>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>