noavatar/my-simple-blog-frontend-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate NextUI

Browse Source
This commit is contained in:
NoAvatar 2024-10-17 06:03:37 +10:00
parent bcb49cafcd
commit a0caa8d8b1
3 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/globals.css
View File

@ -1,27 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

9
src/app/layout.tsx
View File

@ -3,6 +3,7 @@ import localFont from "next/font/local";
import "./globals.css";
import Header from "./components/section/Header";
import Footer from "./components/section/Footer";
import { NextUIProvider } from "@nextui-org/react";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
@ -30,9 +31,15 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<NextUIProvider>
<main className="text-foreground bg-background">
<Header/>
<article>
{children}
<Footer/>
</article>
<Footer />
</main>
</NextUIProvider>
</body>
</html>
);

22
tailwind.config.ts
View File

@ -1,7 +1,9 @@
import type { Config } from "tailwindcss";
import {nextui} from "@nextui-org/react"
const config: Config = {
content: [
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
@ -14,6 +16,24 @@ const config: Config = {
},
},
},
plugins: [],
darkMode: "media",
plugins: [nextui({
prefix: 'nextui',
defaultTheme: 'dark',
themes: {
dark: {
colors: {
foreground: '#FBFBFB',
background: '#101010'
}
},
light: {
colors: {
foreground: '#101010',
background: '#FBFBFB'
}
}
}
})],
};
export default config;