🐛 fix: Update Empty component to support border prop and adjust usage in various pages

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

@@ -3,9 +3,6 @@
 import { Empty } from '@/components/empty';
 import { queryAnnouncement } from '@/services/user/announcement';
 import { useQuery } from '@tanstack/react-query';
-import { Timeline } from '@workspace/ui/components/timeline';
-import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { formatDate } from '@workspace/ui/utils';
 
 export default function Page() {
   const { data } = useQuery({
@@ -20,16 +17,5 @@ export default function Page() {
       return data.data?.announcements || [];
     },
   });
-  return data && data.length > 0 ? (
+  return data && data.length > 0 ? <Empty border /> : <Empty border />;
-    <Timeline
-      data={
-        data.map((item) => ({
-          title: String(formatDate(item.created_at, false)),
-          content: <Markdown>{`### ${item.title}\n${item.content}`}</Markdown>,
-        })) || []
-      }
-    />
-  ) : (
-    <Empty />
-  );
 }

apps/user/app/(main)/(user)/document/document-button.tsx

@@ -100,7 +100,7 @@ export function DocumentButton({ items }: { items: API.Document[] }) {
             layoutId={`card-${item.id}-${id}`}
             key={`card-${item.id}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.id}-${id}`}>

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

@@ -35,7 +35,14 @@ export default function Page() {
     },
     enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
   });
-  if (!DocumentList && !TutorialList) return <Empty />;
+
+  if (
+    (!DocumentList || DocumentList.length === 0) &&
+    (!TutorialList || TutorialList.length === 0)
+  ) {
+    return <Empty border />;
+  }
+
   return (
     <div className='space-y-4'>
       {DocumentList?.length > 0 && (

apps/user/app/(main)/(user)/document/tutorial-button.tsx

@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>

apps/user/components/empty.tsx

@@ -4,7 +4,10 @@ import { default as _Empty } from '@workspace/ui/custom-components/empty';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
-export function Empty() {
+interface EmptyProps {
+  border?: boolean;
+}
+export function Empty({ border }: EmptyProps) {
   const t = useTranslations('common');
 
   const [description, setDescription] = useState('');
@@ -14,5 +17,5 @@ export function Empty() {
     setDescription(t(`empty.${random}`));
   }, [t]);
 
-  return <_Empty description={description} />;
+  return <_Empty description={description} border={border} />;
 }

packages/ui/src/custom-components/empty.tsx

@@ -1,6 +1,14 @@
-export default function Empty({ description }: { description?: React.ReactNode }) {
+export default function Empty({
+  description,
+  border,
+}: {
+  description?: React.ReactNode;
+  border?: boolean;
+}) {
   return (
-    <div className='flex flex-col items-center justify-center p-6 py-16'>
+    <div
+      className={`flex flex-col items-center justify-center p-6 py-16 ${border ? 'rounded-xl border' : ''}`}
+    >
       <svg
         width='64'
         height='41'