- Added essential configuration files including components.json, package.json, and tsconfig.json to establish the component library structure. - Introduced global styles in globals.css and layout structure in layout.tsx for consistent design application. - Implemented various UI components such as Accordion, AlertDialog, Button, Card, and more, enhancing the component library for future development. - Included utility functions and hooks to support component functionality and responsiveness. This commit sets up the groundwork for a comprehensive UI component library, facilitating a modular and scalable design system.
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import type React from "react"
|
|
import type { Metadata } from "next"
|
|
import { Space_Grotesk, Playfair_Display } from "next/font/google"
|
|
import { Analytics } from "@vercel/analytics/next"
|
|
import "./globals.css"
|
|
|
|
const spaceGrotesk = Space_Grotesk({
|
|
subsets: ["latin"],
|
|
variable: "--font-sans",
|
|
})
|
|
|
|
const playfairDisplay = Playfair_Display({
|
|
subsets: ["latin"],
|
|
variable: "--font-serif",
|
|
})
|
|
|
|
export const metadata: Metadata = {
|
|
title: "United Tattoo Component Library",
|
|
description: "A living design system with sun-washed plaster aesthetics and gallery pacing principles",
|
|
generator: "v0.app",
|
|
icons: {
|
|
icon: [
|
|
{
|
|
url: "/icon-light-32x32.png",
|
|
media: "(prefers-color-scheme: light)",
|
|
},
|
|
{
|
|
url: "/icon-dark-32x32.png",
|
|
media: "(prefers-color-scheme: dark)",
|
|
},
|
|
{
|
|
url: "/icon.svg",
|
|
type: "image/svg+xml",
|
|
},
|
|
],
|
|
apple: "/apple-icon.png",
|
|
},
|
|
}
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode
|
|
}>) {
|
|
return (
|
|
<html lang="en" className={`${spaceGrotesk.variable} ${playfairDisplay.variable}`}>
|
|
<body className={`font-sans antialiased`}>
|
|
{children}
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|