added footer

RLabs-Inc · Oct 15, 2024 · cfb9b69 · cfb9b69
1 parent 7b6d7ba
commit cfb9b69
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 53 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,7 +10,7 @@ import { auth } from '@clerk/nextjs/server'
 import { Toaster } from '@/components/ui/toaster'
 import { Navigation } from '@/components/Navigation'
 import { ThemeProvider as ThemeProviderContext } from '@/contexts/ThemeContext'
-
+import Footer from '@/components/Footer'
 import { Analytics } from '@vercel/analytics/react'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -45,6 +45,7 @@ export default function RootLayout({
             <ThemeProviderContext userId={userId ?? undefined}>
               <Navigation />
               {children}
+              <Footer />
               <Toaster />
               <Analytics />
             </ThemeProviderContext>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,58 +11,56 @@ import {
 
 export default function Home() {
   return (
-    <div>
-      <main className="p-10">
-        <div className="flex flex-col items-center justify-between h-[calc(100vh-9rem)]">
-          <div></div>
-          <div className="flex flex-col items-center justify-center">
-            <h1 className="text-4xl font-bold mb-4">
-              Welcome to VSCode Themes Community
-            </h1>
-            <p className="text-xl mb-4 text-muted-foreground">
-              Generate, edit, download, share, and discover new themes for
-              Visual Studio Code.
-            </p>
-          </div>
-          <div className="flex flex-wrap md:flex-nowrap items-stretch justify-center gap-10">
-            <Card className="flex-1">
-              <CardHeader>
-                <CardTitle>Discover Themes</CardTitle>
-                <CardDescription>
-                  Browse and download install-ready themes created by the
-                  community.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p></p>
-              </CardContent>
-              <CardFooter>
-                <Button>
-                  <Link href="/discover">Explore Themes</Link>
-                </Button>
-              </CardFooter>
-            </Card>
-            <Card className="flex-1">
-              <CardHeader>
-                <CardTitle>Create a Theme</CardTitle>
-                <CardDescription>
-                  Create and edit your next VSCode theme in a tool with a newly
-                  designed algorithm that uses sacred geometry patterns to
-                  generate harmonized and pleasent colors to use in your theme.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p></p>
-              </CardContent>
-              <CardFooter>
-                <Button>
-                  <Link href="/generator">Get Started</Link>
-                </Button>
-              </CardFooter>
-            </Card>
-          </div>
+    <main className="p-10">
+      <div className="flex flex-col items-center justify-between h-[calc(100vh-11rem)]">
+        <div></div>
+        <div className="flex flex-col items-center justify-center">
+          <h1 className="text-4xl font-bold mb-4">
+            Welcome to VSCode Themes Community
+          </h1>
+          <p className="text-xl mb-4 text-muted-foreground">
+            Generate, edit, download, share, and discover new themes for Visual
+            Studio Code.
+          </p>
         </div>
-      </main>
-    </div>
+        <div className="flex flex-wrap md:flex-nowrap items-stretch justify-center gap-10">
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle>Discover Themes</CardTitle>
+              <CardDescription>
+                Browse and download install-ready themes created by the
+                community.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p></p>
+            </CardContent>
+            <CardFooter>
+              <Button>
+                <Link href="/discover">Explore Themes</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle>Create a Theme</CardTitle>
+              <CardDescription>
+                Create and edit your next VSCode theme in a tool with a newly
+                designed algorithm that uses sacred geometry patterns to
+                generate harmonized and pleasent colors to use in your theme.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p></p>
+            </CardContent>
+            <CardFooter>
+              <Button>
+                <Link href="/generator">Get Started</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </main>
   )
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,13 @@
+export default function Footer() {
+  return (
+    <footer className="sticky bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="p-2">
+        <div className="flex justify-center items-center">
+          <p className="text-sm text-foreground">
+            &copy; {new Date().getFullYear()} RLabs Inc. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/lib/db/themes.ts b/src/lib/db/themes.ts
@@ -23,6 +23,7 @@ export async function getThemesByUserId(userId: string): Promise<SavedTheme[]> {
     .select()
     .from(ThemesTable)
     .where(eq(ThemesTable.userId, userId))
+    .orderBy(desc(ThemesTable.createdAt))
   return results.map(parseSavedTheme)
 }