From 1b521449fb0f335bfc1c70ebb4591658dab374ce Mon Sep 17 00:00:00 2001
From: nyatinte <takumi.062757@gmail.com>
Date: Sat, 17 Feb 2024 12:19:21 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92Fi?=
 =?UTF-8?q?gma=E3=81=AB=E8=BF=91=E3=81=A5=E3=81=91=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: N-ha-1050 <69199126+N-ha-1050@users.noreply.github.com>
---
 app/components/ui/user_card/index.tsx | 32 ++++++++++++---------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/app/components/ui/user_card/index.tsx b/app/components/ui/user_card/index.tsx
index cc35832..c8b0803 100644
--- a/app/components/ui/user_card/index.tsx
+++ b/app/components/ui/user_card/index.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@remix-run/react';
+import { Check } from 'lucide-react';
 import { useState } from 'react';
 import { Avatar } from '../avatar';
-import { Card, CardContent, CardTitle } from '../card';
 
 const getProfileIcon = (xid: string) => {
   // TODO: プロフィールアイコン取得(ライブラリ?)
@@ -16,10 +16,6 @@ const getProfileIcon = (xid: string) => {
   }
   return 'https://pbs.twimg.com/profile_images/1683899100922511378/5lY42eHs_400x400.jpg';
 };
-const CheckMark = () => {
-  // TODO: チェックマーク(画像を作るかライブラリからインポート?)
-  return <>✔</>;
-};
 
 export type UserCardProps = {
   user: {
@@ -43,20 +39,20 @@ const UserCard = ({
       onClick={handleClick}
       className='w-72 h-20'
     >
-      <Card className='grid grid-rows-2 grid-cols-3 w-full p-3 h-full relative border-inherit hover:border-black'>
-        <div className='self-center justify-self-center col-span-1 row-span-2'>
-          <Avatar src={profile_icon} alt={`${xid}'s icon`} />
-        </div>
-        <CardTitle className='col-span-2 row-span-1 text-sm truncate'>
-          @{xid}
-        </CardTitle>
-        <CardContent className='col-span-2 row-span-1 text-xs truncate'>
-          {nickname}
-        </CardContent>
-        <div className='absolute top-0 right-0' hidden={!isLooked}>
-          <CheckMark />
+      <div className='relative flex justify-between space-x-4 items-center border rounded-md shadow-md p-4 hover:bg-accent duration-200'>
+        <Avatar src={profile_icon} alt={`${xid}'s icon`} fallback={xid} />
+        <div className='space-y-1'>
+          <h4 className='text-sm font-semibold'>@{xid}</h4>
+          <p className='text-sm'>{nickname}</p>
+          <div className='absolute -top-2 -right-2' hidden={!isLooked}>
+            <Check
+              strokeWidth='2.5px'
+              color='white'
+              className='bg-green-600 rounded-full'
+            />
+          </div>
         </div>
-      </Card>
+      </div>
     </Link>
   );
 };