♻️ refactor(empty): Content

apps/user/app/(main)/(user)/affiliate/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { Display } from '@/components/display';
+import { Empty } from '@/components/empty';
 import { ProList } from '@/components/pro-list';
 import useGlobalStore from '@/config/use-global';
 import { queryUserAffiliate } from '@/services/user/user';
@@ -70,6 +71,7 @@ export default function Page() {
             </Card>
           );
         }}
+        empty={<Empty />}
       />
     </div>
   );

apps/user/app/(main)/(user)/announcement/page.tsx

@@ -1,10 +1,9 @@
 'use client';
 
+import { Empty } from '@/components/empty';
 import { queryAnnouncement } from '@/services/user/announcement';
-import Empty from '@repo/ui/empty';
 import { Markdown } from '@repo/ui/markdown';
-import { formatDate } from '@repo/ui/utils';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@shadcn/ui/card';
+import { Timeline } from '@shadcn/ui/timeline';
 import { useQuery } from '@tanstack/react-query';
 
 export default function Page() {
@@ -18,23 +17,16 @@ export default function Page() {
       return data.data?.announcements || [];
     },
   });
-  return (
-    <div className='flex flex-col gap-5'>
-      {data?.length ? (
-        data.map((item) => (
-          <Card key={item.id}>
-            <CardHeader>
-              <CardTitle>{item.title}</CardTitle>
-              <CardDescription>{formatDate(item.updated_at)}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Markdown>{item.content}</Markdown>
-            </CardContent>
-          </Card>
-        ))
-      ) : (
-        <Empty />
-      )}
-    </div>
+  return data && data.length > 0 ? (
+    <Timeline
+      data={
+        data.map((item) => ({
+          title: item.title,
+          content: <Markdown>{item.content}</Markdown>,
+        })) || []
+      }
+    />
+  ) : (
+    <Empty />
   );
 }

apps/user/app/(main)/(user)/dashboard/announcemnet.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { Empty } from '@/components/empty';
 import { queryAnnouncement } from '@/services/user/announcement';
 import { Icon } from '@iconify/react';
-import Empty from '@repo/ui/empty';
 import { Markdown } from '@repo/ui/markdown';
 import { Card } from '@shadcn/ui/card';
 import { useQuery } from '@tanstack/react-query';

apps/user/app/(main)/(user)/order/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Display } from '@/components/display';
+import { Empty } from '@/components/empty';
 import { ProList, ProListActions } from '@/components/pro-list';
 import { closeOrder, queryOrderList } from '@/services/user/order';
 import { formatDate } from '@repo/ui/utils';
@@ -91,6 +92,7 @@ export default function Page() {
           </Card>
         );
       }}
+      empty={<Empty />}
     />
   );
 }

apps/user/app/(main)/(user)/subscribe/page.tsx

@@ -12,6 +12,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
+import { Empty } from '@/components/empty';
 import Purchase from '../order/purchase';
 import { SubscribeDetail } from './detail';
 
@@ -133,6 +134,7 @@ export default function Page() {
               </Card>
             ))}
         </div>
+        {data?.length === 0 && <Empty />}
       </Tabs>
       <Purchase subscribe={subscribe} setSubscribe={setSubscribe} />
     </>

apps/user/app/(main)/(user)/ticket/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Empty } from '@/components/empty';
 import { ProList, ProListActions } from '@/components/pro-list';
 import {
   createUserTicket,
@@ -217,6 +218,7 @@ export default function Page() {
             </Card>
           );
         }}
+        empty={<Empty />}
       />
       <Drawer
         open={!!ticketId}

apps/user/app/(main)/(user)/wallet/page.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@shadcn/ui/card';
 import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 
+import { Empty } from '@/components/empty';
 import { formatDate } from '@repo/ui/utils';
 import Recharge from '../order/recharge';
 
@@ -71,6 +72,7 @@ export default function Page() {
             </Card>
           );
         }}
+        empty={<Empty />}
       />
     </>
   );

apps/user/components/empty.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { default as _Empty } from '@repo/ui/empty';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+export function Empty() {
+  const t = useTranslations('common');
+
+  const [description, setDescription] = useState('');
+
+  useEffect(() => {
+    const random = Math.floor(Math.random() * 10);
+    setDescription(t(`empty.${random}`));
+  }, []);
+
+  return <_Empty description={description} />;
+}