feat: add cards for stats

apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx

@@ -18,6 +18,7 @@ import { useQueryPerformanceQuery } from '../Reports/Reports.queries'
 import { PresetHookResult } from '../Reports/Reports.utils'
 import { QueryPerformanceFilterBar } from './QueryPerformanceFilterBar'
 import { QueryPerformanceGrid } from './QueryPerformanceGrid'
+import { QueryPerformanceGlance } from './QueryPerformanceGlance'
 
 interface QueryPerformanceProps {
   queryHitRate: PresetHookResult
@@ -66,7 +67,7 @@ export const QueryPerformance = ({
 
   return (
     <>
-      <div>stats</div>
+      <QueryPerformanceGlance />
 
       <QueryPerformanceFilterBar
         queryPerformanceQuery={queryPerformanceQuery}

apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGlance.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react'
+
+import { Card, CardContent } from 'ui'
+import { Database, Clock, AlertCircle } from 'lucide-react'
+import dayjs from 'dayjs'
+
+export const QueryPerformanceGlance = () => {
+  const cards = useMemo(() => {
+    return [
+      {
+        icon: <Database size={14} strokeWidth={1} />,
+        title: 'Queries',
+        values: [
+          {
+            label: 'Most time consuming',
+            value: 'here',
+          },
+          {
+            label: 'Slow queries',
+            value: 'here',
+          },
+        ],
+      },
+      {
+        icon: <Clock size={14} strokeWidth={1} />,
+        title: 'Calls',
+        values: [
+          {
+            label: 'Unique',
+            value: 'here',
+          },
+          {
+            label: 'Unique',
+            value: 'here',
+          },
+        ],
+      },
+      {
+        icon: <AlertCircle size={14} strokeWidth={1} />,
+        title: 'Cache hits',
+        values: [
+          {
+            label: 'Hits',
+            value: 'here',
+          },
+          {
+            label: 'Misses',
+            value: 'here',
+          },
+        ],
+      },
+    ]
+  }, [])
+  return (
+    <div className="pb-4 pt-0 px-6">
+      <section className="grid grid-cols-3 gap-4 w-full">
+        {cards.map((card, index) => (
+          <Card key={index}>
+            <CardContent className="flex flex-col items-start gap-2">
+              <div className="flex gap-2 items-center text-foreground-light">
+                <span>{card.icon}</span>
+                <span className="text-xs font-mono uppercase truncate max-w-[24ch]">
+                  {card.title}
+                </span>
+              </div>
+              <div className="flex flex-col w-full divide-y divide-dashed last:[&>div]:pb-0">
+                {card.values.map((value, index) => (
+                  <div
+                    key={index}
+                    className="text-xs py-2 flex justify-between items-center w-full"
+                  >
+                    <span className="font-mono text-foreground-lighter truncate max-w-[16ch]">
+                      {value.label}{' '}
+                    </span>
+                    <span className="text-sm">{value.value}</span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+    </div>
+  )
+}