show project cards in grid

apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx

@@ -45,12 +45,14 @@ export default async function Page({
       <FullWidthNavbar>
         <SignOutButton />
       </FullWidthNavbar>
-      <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
+      <div className="mx-auto flex flex-col gap-4 p-4 pt-20 md:max-w-[95vw] lg:max-w-[80vw] ">
         <h1 className="text-xl font-medium">Select project</h1>
+        <div className="grid gap-4 md:grid-cols-2">
           {projects.map((item) => (
             <ProjectCard key={item.id} {...item} />
           ))}
         </div>
       </div>
+    </div>
   );
 }

apps/dashboard/src/components/projects/project-card.tsx

@@ -1,8 +1,5 @@
 import { Suspense } from 'react';
-import withSuspense from '@/hocs/with-suspense';
 import { shortNumber } from '@/hooks/useNumerFormatter';
-import { Fallback } from '@radix-ui/react-avatar';
-import { endOfMonth, startOfMonth } from 'date-fns';
 import { escape } from 'sqlstring';
 
 import type { IServiceProject } from '@openpanel/db';
@@ -26,9 +23,7 @@ function ProjectCard({ id, name, organizationSlug }: IServiceProject) {
           <ProjectChart id={id} />
         </Suspense>
       </div>
-      <div className="flex justify-between gap-4 text-sm text-muted-foreground">
+      <div className="flex justify-end gap-4 text-sm text-muted-foreground">
-        <div className="font-medium">Visitors</div>
-
         <Suspense>
           <ProjectMetrics id={id} />
         </Suspense>