pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added a footer and theme switcher - wrote 6 file(s), deleted 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 12:00:18 +01:00
parent 3f4cd7443c
commit e978708456
7 changed files with 60 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -23,11 +24,18 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);

4
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
import { MadeWithDyad } from "@/components/made-with-dyad";
import { Footer } from "@/components/footer";
import { MetaForm } from "@/components/meta-form";
export default function Home() {
@@ -15,7 +15,7 @@ export default function Home() {
</div>
<MetaForm />
</main>
<MadeWithDyad />
<Footer />
</div>
);
}

14
src/components/footer.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { ThemeToggle } from "@/components/theme-toggle";
export const Footer = () => {
return (
<footer className="w-full max-w-2xl p-4 row-start-2">
<div className="flex justify-between items-center">
<p className="text-sm text-gray-500 dark:text-gray-400">
v0.1.0
</p>
<ThemeToggle />
</div>
</footer>
);
};

14
src/components/made-with-dyad.tsx
View File

@@ -1,14 +0,0 @@
export const MadeWithDyad = () => {
return (
<div className="p-4 text-center">
<a
href="https://www.dyad.sh/"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
Made with Dyad
</a>
</div>
);
};

2
src/components/meta-form.tsx
View File

@@ -50,7 +50,7 @@ export function MetaForm() {
className="pl-10 h-12 text-base rounded-lg shadow-sm"
/>
</div>
<Button type="submit" disabled={loading} className="w-full sm:w-auto h-12 px-8 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all">
<Button type="submit" disabled={loading} className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all">
{loading ? "Extracting..." : "Extract"}
</Button>
</form>

9
src/components/theme-provider.tsx Normal file
View File

@@ -0,0 +1,9 @@
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

23
src/components/theme-toggle.tsx Normal file
View File

@@ -0,0 +1,23 @@
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
export function ThemeToggle() {
const { setTheme, theme } = useTheme()
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
)
}