From 813f86a9a9b5893ca731cb7119f4c7990b53bda8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 28 May 2024 19:58:08 +0200
Subject: [PATCH] show project cards in grid

---
 .../src/app/(app)/[organizationSlug]/page.tsx          | 10 ++++++----
 .../dashboard/src/components/projects/project-card.tsx |  7 +------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
index fe8df846..40dc956d 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
@@ -45,11 +45,13 @@ 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>
-        {projects.map((item) => (
-          <ProjectCard key={item.id} {...item} />
-        ))}
+        <div className="grid gap-4 md:grid-cols-2">
+          {projects.map((item) => (
+            <ProjectCard key={item.id} {...item} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/components/projects/project-card.tsx b/apps/dashboard/src/components/projects/project-card.tsx
index 035df73e..b42872df 100644
--- a/apps/dashboard/src/components/projects/project-card.tsx
+++ b/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="font-medium">Visitors</div>
-
+      <div className="flex justify-end gap-4 text-sm text-muted-foreground">
         <Suspense>
           <ProjectMetrics id={id} />
         </Suspense>