From 882dc6f0c6e67fa0b0dc73d532b07dcda2bc5cea Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Thu, 21 Nov 2024 16:50:18 +0900
Subject: [PATCH] feature: add UserCard component

---
 src/domains/match/components/UserCard.tsx | 31 +++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/domains/match/components/UserCard.tsx

diff --git a/src/domains/match/components/UserCard.tsx b/src/domains/match/components/UserCard.tsx
new file mode 100644
index 0000000..9766e49
--- /dev/null
+++ b/src/domains/match/components/UserCard.tsx
@@ -0,0 +1,31 @@
+import { Info } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../../../components/ui/avatar";
+
+export interface UserCardProps {
+    index: number;
+    nickname: string;
+    imgSrc?: string;
+    status: "PENDING" | "ACCEPTED";
+}
+
+export const UserCard = ({ index, nickname, imgSrc, status }: UserCardProps) => {
+    return (
+        <div className="flex items-center justify-between border-[1px] rounded-lg p-1.5 h-[46px]">
+            <div className="flex items-center w-full gap-2 ml-2">
+                <h1 className="font-bold">{index}</h1>
+                <Avatar className="w-8 h-8">
+                    <AvatarImage src={imgSrc} alt={nickname} />
+                    <AvatarFallback>{nickname[0]}</AvatarFallback>
+                </Avatar>
+                <h1 className="">{nickname}</h1>
+            </div>
+            <div className="flex items-center h-full mr-2">
+                <div className="inline-flex justify-center text-black rounded-md bg-accent w-[70px] h-full items-center">
+                    {status === "PENDING" ? "수락대기" : "수락완료"}
+                </div>
+                <Info size={20} className="ml-1" />
+            </div>
+        </div>
+    );
+};