♻️ 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>
-        ))
+  return data && data.length > 0 ? (
+    <Timeline
+      data={
+        data.map((item) => ({
+          title: item.title,
+          content: <Markdown>{item.content}</Markdown>,
+        })) || []
+      }
+    />
   ) : (
     <Empty />
-      )}
-    </div>
   );
 }

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} />;
+}

packages/ui/src/empty.tsx

@@ -1,4 +1,4 @@
-export default function Empty() {
+export default function Empty({ description }: { description?: React.ReactNode }) {
   return (
     <div className='flex flex-col items-center justify-center p-6 py-16'>
       <svg
@@ -21,6 +21,7 @@ export default function Empty() {
           </g>
         </g>
       </svg>
+      <p className='mt-6 text-center text-gray-500'>{description}</p>
     </div>
   );
 }

packages/ui/src/pro-list/pro-list.tsx

@@ -38,6 +38,7 @@ export interface ProListProps<TData, TValue> {
     textPageOf: (current: number, total: number) => string;
     selectedRowsText: (total: number) => string;
   }>;
+  empty?: React.ReactNode;
 }
 export interface ProListActions {
   refresh: () => void;
@@ -52,6 +53,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
   renderItem,
   action,
   texts,
+  empty,
 }: ProListProps<TData, TValue>) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [rowSelection, setRowSelection] = useState<{ [key: number]: boolean }>({});
@@ -187,9 +189,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
               return <div key={index}>{renderItem(item, checkbox)}</div>;
             })
           ) : (
-            <div className='flex items-center justify-center py-24'>
-              <Empty />
-            </div>
+            <div className='flex items-center justify-center py-24'>{empty || <Empty />}</div>
           )}
         </div>
 

packages/ui/src/pro-table/pro-table.tsx

@@ -52,6 +52,7 @@ export interface ProTableProps<TData, TValue> {
     textPageOf: (current: number, total: number) => string;
     selectedRowsText: (total: number) => string;
   }>;
+  empty?: React.ReactNode;
 }
 export interface ProTableActions {
   refresh: () => void;
@@ -66,6 +67,7 @@ export function ProTable<TData, TValue extends Record<string, unknown>>({
   actions,
   action,
   texts,
+  empty,
 }: ProTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -240,7 +242,7 @@ export function ProTable<TData, TValue extends Record<string, unknown>>({
             ) : (
               <TableRow>
                 <TableCell colSpan={columns.length + 2} className='py-24'>
-                  <Empty />
+                  {empty || <Empty />}
                 </TableCell>
               </TableRow>
             )}