スタイルをFigmaに近づける

Co-authored-by: N-ha-1050 <[email protected]>
ycu-engine · Feb 17, 2024 · f4b0d57 · f4b0d57
1 parent a223cfa
commit f4b0d57
Showing 1 changed file with 14 additions and 18 deletions.
diff --git 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='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-1 right-1' hidden={!isLooked}>
+            <Check
+              strokeWidth='2.5px'
+              color='white'
+              className='bg-green-600 rounded-full'
+            />
+          </div>
         </div>
-      </Card>
+      </div>
     </Link>
   );
 };