feat(omi-templates): dashboard layout

Tencent · Feb 20, 2024 · a8785c5 · a8785c5
1 parent 0018efe
commit a8785c5
Showing 1 changed file with 43 additions and 1 deletion.
diff --git a/packages/omi-templates/src/components/admin-layout.tsx b/packages/omi-templates/src/components/admin-layout.tsx
@@ -61,8 +61,50 @@ export function AdminLayout() {
           </div>
         </header>
         <main class="p-4">
+          <h3 class="text-xl font-semibold mb-2">Coming soon....</h3>
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-xl font-semibold">Coming soon....</h3>
+            <div class="container mx-auto">
+              <div class="grid grid-cols-1  md:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
+                <div class="bg-background shadow-md rounded p-4 dark:border h-40 text-5xl flex items-center justify-center">
+                  1
+                </div>
+                <div class="bg-background shadow-md rounded p-4 dark:border h-40 text-5xl flex items-center justify-center">
+                  2
+                </div>
+                <div class="bg-background shadow-md rounded p-4 dark:border h-40 text-5xl flex items-center justify-center">
+                  3
+                </div>
+                <div class="bg-background shadow-md rounded p-4 dark:border h-40 text-5xl flex items-center justify-center">
+                  4
+                </div>
+              </div>
+
+              <div class="grid grid-cols-4 gap-6 mb-6">
+                <div class="md:col-span-3 col-span-4 bg-background shadow-md rounded p-4 dark:border h-96 text-5xl flex items-center justify-center">
+                  5
+                </div>
+                <div class="md:col-span-1 col-span-4 bg-background shadow-md rounded p-4 dark:border h-96 text-5xl flex items-center justify-center">
+                  6
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                <div class="bg-background shadow-md rounded p-4 dark:border h-96 text-5xl flex items-center justify-center">
+                  7
+                </div>
+                <div class="bg-background shadow-md rounded p-4 dark:border h-96 text-5xl flex items-center justify-center">
+                  8
+                </div>
+              </div>
+
+              <div class="bg-background shadow-md rounded p-4 dark:border">
+                <div class="flex justify-between items-center mb-4"></div>
+                <div class="grid grid-cols-4 gap-6">
+                  <div class="md:col-span-3 col-span-4 text-5xl flex items-center justify-center">9</div>
+                  <div class="md:col-span-1 col-span-4 text-5xl flex items-center justify-center">10</div>
+                </div>
+              </div>
+            </div>
           </div>
         </main>
       </div>