Skip to content

Commit 3bd13cb

Browse files
MeschacirungMeschacirung
committed
feat: add theme provider and toggle components, update Prettier configuration
1 parent c8af053 commit 3bd13cb

File tree

10 files changed

+295
-127
lines changed

10 files changed

+295
-127
lines changed

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Ignore artifacts:
2+
build
3+
coverage

‎.prettierrc

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"printWidth": 500,
3+
"semi": false,
4+
"tabWidth": 4,
5+
"parser": "babel",
6+
"singleQuote": true,
7+
"trailingComma": "es5",
8+
"jsxBracketSameLine": true,
9+
"quoteProps" : "as-needed",
10+
"jsxSingleQuote" : false,
11+
"bracketSpacing" : true,
12+
"bracketSameLine" : false,
13+
"useTabs" : false,
14+
"plugins": [
15+
"prettier-plugin-tailwindcss"
16+
],
17+
"tailwindStylesheet": "./app/global.css",
18+
"overrides": [
19+
{
20+
"files": "*.tsx",
21+
"options": {
22+
"parser": "babel-ts"
23+
}
24+
}
25+
]
26+
}

‎app/layout.tsx

Lines changed: 102 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,113 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next'
2+
import { Geist, Geist_Mono } from 'next/font/google'
3+
import './globals.css'
4+
import { ThemeProvider } from '@/components/theme-provider'
5+
import Link from 'next/link'
6+
import { Button } from '@/components/ui/button'
7+
import { ArrowUpRight } from 'lucide-react'
8+
import { ThemeToggle } from '@/components/ThemeToggle'
49

510
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
8-
});
11+
variable: '--font-geist-sans',
12+
subsets: ['latin'],
13+
})
914

1015
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
13-
});
16+
variable: '--font-geist-mono',
17+
subsets: ['latin'],
18+
})
1419

1520
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
18-
};
21+
title: 'Create Next App',
22+
description: 'Generated by create next app',
23+
}
1924

2025
export default function RootLayout({
21-
children,
26+
children,
2227
}: Readonly<{
23-
children: React.ReactNode;
28+
children: React.ReactNode
2429
}>) {
25-
return (
26-
<html lang="en" className="">
27-
<body
28-
className={`${geistSans.variable} ${geistMono.variable} overflow-x-hidden antialiased`}
29-
>
30-
{children}
31-
32-
<footer className="py-4">
33-
<div className="max-w-6xl mx-auto px-6">
34-
<div className="-mb-2 flex flex-wrap gap-1 overflow-hidden text-sm font-medium text-gray-700 dark:text-gray-300">
35-
Designed by Tailus UI in
36-
<div className="flex items-start justify-center gap-2 text-center font-semibold text-gray-950 sm:gap-1 dark:text-white">
37-
<div className="block">
38-
<div className="block pb-2">DR Congo</div>
39-
<div className="-mt-5 grow overflow-hidden">
40-
<svg aria-hidden="true" className="w-16" height="22" viewBox="0 0 283 22" fill="none" xmlns="http://www.w3.org/2000/svg">
41-
<path d="M1.24715 19.3744C72.4051 10.3594 228.122 -4.71194 281.724 7.12332" stroke="url(#paint0_linear_pl)" strokeWidth="4"></path>
42-
<defs>
43-
<linearGradient id="paint0_linear_pl" x1="282" y1="5.49999" x2="40" y2="13" gradientUnits="userSpaceOnUse">
44-
<stop stopColor="#facc15"></stop>
45-
<stop offset="1" stopColor="#a855f7"></stop>
46-
</linearGradient>
47-
</defs>
48-
</svg>
49-
</div>
50-
</div>
51-
</div>
52-
</div>
53-
</div>
54-
</footer>
55-
</body>
56-
</html>
57-
);
30+
return (
31+
<html lang="en">
32+
<body className={`${geistSans.variable} ${geistMono.variable} overflow-x-hidden antialiased`}>
33+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
34+
<div aria-hidden role="presentation" className="absolute inset-0 -z-10 max-h-96 bg-[radial-gradient(ellipse_80%_70%_at_20%_-20%,var(--bg-color),transparent)] duration-300 [--bg-color:var(--color-indigo-400)] dark:[--bg-color:var(--color-zinc-800)]"></div>
35+
36+
<div aria-hidden className="absolute inset-x-0 top-0 mx-auto hidden max-w-7xl lg:block">
37+
<div className="absolute left-0 top-0 h-56 w-px bg-gradient-to-b from-gray-950/[0.07] dark:from-white/[0.07]"></div>
38+
<div className="absolute right-0 top-0 h-56 w-px bg-gradient-to-b from-gray-950/[0.07] dark:from-white/[0.07]"></div>
39+
<div className="absolute -left-20 top-16 h-12 w-20 p-2">
40+
<div className="-z-10 h-full w-full bg-[radial-gradient(var(--bg-color)_1px,transparent_1px)] [--bg-color:theme(colors.gray.950/0.1)] [background-size:6px_6px] dark:[--bg-color:theme(colors.white/0.05)]"></div>
41+
</div>
42+
43+
<div className="absolute -right-20 top-16 h-12 w-20 p-2">
44+
<div className="-z-10 h-full w-full bg-[radial-gradient(var(--bg-color)_1px,transparent_1px)] [--bg-color:theme(colors.gray.950/0.1)] [background-size:6px_6px] dark:[--bg-color:theme(colors.white/0.05)]"></div>
45+
</div>
46+
</div>
47+
48+
<div aria-hidden className="absolute inset-x-0 top-16 z-20 mx-auto h-12 border-y border-gray-950/[0.07] dark:border-white/5" />
49+
50+
<header>
51+
<div className="mx-auto flex max-w-7xl justify-between px-6 py-4">
52+
<Link href="/" className="flex w-fit items-center gap-2">
53+
<svg className="size-7" viewBox="0 0 71 25" fill="none" xmlns="http://www.w3.org/2000/svg">
54+
<path
55+
d="M61.25 1.625L70.75 1.5625C70.75 4.77083 70.25 7.79167 69.25 10.625C68.2917 13.4583 66.8958 15.9583 65.0625 18.125C63.2708 20.25 61.125 21.9375 58.625 23.1875C56.1667 24.3958 53.4583 25 50.5 25C46.875 25 43.6667 24.2708 40.875 22.8125C38.125 21.3542 35.125 19.2083 31.875 16.375C29.75 14.4167 27.7917 12.8958 26 11.8125C24.2083 10.7292 22.2708 10.1875 20.1875 10.1875C18.0625 10.1875 16.25 10.7083 14.75 11.75C13.25 12.75 12.0833 14.1875 11.25 16.0625C10.4583 17.9375 10.0625 20.1875 10.0625 22.8125L0 22.9375C0 19.6875 0.479167 16.6667 1.4375 13.875C2.4375 11.0833 3.83333 8.64583 5.625 6.5625C7.41667 4.47917 9.54167 2.875 12 1.75C14.5 0.583333 17.2292 0 20.1875 0C23.8542 0 27.1042 0.770833 29.9375 2.3125C32.8125 3.85417 35.7708 5.97917 38.8125 8.6875C41.1042 10.7708 43.1042 12.3333 44.8125 13.375C46.5625 14.375 48.4583 14.875 50.5 14.875C52.6667 14.875 54.5417 14.3125 56.125 13.1875C57.75 12.0625 59 10.5 59.875 8.5C60.7917 6.5 61.25 4.20833 61.25 1.625Z"
56+
fill="currentColor"
57+
/>
58+
</svg>
59+
<span className="sr-only font-bold">ns UI</span>
60+
</Link>
61+
<div className="-mr-2 flex items-center">
62+
<Button asChild variant="link" className="gap-1">
63+
<Link href="" className="text-sm">
64+
GitHub
65+
<ArrowUpRight className="!size-3.5 opacity-50" />
66+
</Link>
67+
</Button>
68+
<ThemeToggle />
69+
</div>
70+
</div>
71+
</header>
72+
73+
<main>
74+
<section>
75+
<div className="mx-auto max-w-7xl px-6">
76+
<div className="max-w-xl pb-12 md:pb-16">
77+
<h1 className="mt-24 text-3xl font-bold sm:mt-28 sm:text-4xl md:text-nowrap">Shadcn Pricing Blocks</h1>
78+
<p className="mt-4 text-base md:text-lg">Speed up your workflow with responsive, pre-built UI blocks designed for marketing websites.</p>
79+
</div>
80+
</div>
81+
</section>
82+
83+
{children}
84+
</main>
85+
86+
<footer className="py-4">
87+
<div className="mx-auto max-w-6xl px-6">
88+
<div className="-mb-2 flex flex-wrap gap-1 overflow-hidden text-sm font-medium text-gray-700 dark:text-gray-300">
89+
Designed by Tailus UI in
90+
<div className="flex items-start justify-center gap-2 text-center font-semibold text-gray-950 sm:gap-1 dark:text-white">
91+
<div className="block">
92+
<div className="block pb-2">DR Congo</div>
93+
<div className="-mt-5 grow overflow-hidden">
94+
<svg aria-hidden="true" className="w-16" height="22" viewBox="0 0 283 22" fill="none" xmlns="http://www.w3.org/2000/svg">
95+
<path d="M1.24715 19.3744C72.4051 10.3594 228.122 -4.71194 281.724 7.12332" stroke="url(#paint0_linear_pl)" strokeWidth="4"></path>
96+
<defs>
97+
<linearGradient id="paint0_linear_pl" x1="282" y1="5.49999" x2="40" y2="13" gradientUnits="userSpaceOnUse">
98+
<stop stopColor="#facc15"></stop>
99+
<stop offset="1" stopColor="#a855f7"></stop>
100+
</linearGradient>
101+
</defs>
102+
</svg>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</footer>
109+
</ThemeProvider>
110+
</body>
111+
</html>
112+
)
58113
}

‎app/page.tsx

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,10 @@
1-
import BlockPreview from "@/components/BlockPreview";
2-
import PricingOne from "@/components/pricing/One";
3-
import { Button } from "@/components/ui/button";
4-
import { ChevronRight, GithubIcon } from "lucide-react";
5-
import Link from "next/link";
1+
import BlockPreview from '@/components/BlockPreview'
62

73
export default function Home() {
8-
return (
9-
<div className="">
10-
<div className="absolute inset-0 -z-10 max-h-96 bg-[radial-gradient(ellipse_80%_70%_at_20%_-20%,var(--bg-color),transparent)] duration-300 [--bg-color:var(--color-indigo-400)] dark:[--bg-color:var(--color-zinc-800)]"></div>
11-
12-
<div className="absolute inset-x-0 top-0 mx-auto hidden max-w-7xl lg:block">
13-
<div className="absolute left-0 top-0 h-56 w-px bg-gradient-to-b from-gray-950/[0.07] dark:from-white/[0.07]"></div>
14-
<div className="absolute right-0 top-0 h-56 w-px bg-gradient-to-b from-gray-950/[0.07] dark:from-white/[0.07]"></div>
15-
<div className="absolute -left-20 top-16 h-12 w-20 p-2">
16-
<div className="-z-10 h-full w-full bg-[radial-gradient(var(--bg-color)_1px,transparent_1px)] [--bg-color:theme(colors.gray.950/0.1)] [background-size:6px_6px] dark:[--bg-color:theme(colors.white/0.05)]"></div>
17-
</div>
18-
<div className="absolute -right-20 top-16 h-12 w-20 p-2">
19-
<div className="-z-10 h-full w-full bg-[radial-gradient(var(--bg-color)_1px,transparent_1px)] [--bg-color:theme(colors.gray.950/0.1)] [background-size:6px_6px] dark:[--bg-color:theme(colors.white/0.05)]"></div>
20-
</div>
21-
</div>
22-
<div className="absolute top-16 inset-x-0 z-20 mx-auto h-12 border-y border-gray-950/[0.07] dark:border-white/5"></div>
23-
24-
<div className="">
25-
<div className="max-w-7xl mx-auto px-6">
26-
27-
<div className="md:pb-14 lg:pb-16 pt-4 max-w-xl">
28-
<Link href="" className="flex w-fit items-center gap-2">
29-
<svg className="size-7" viewBox="0 0 71 25" fill="none" xmlns="http://www.w3.org/2000/svg">
30-
<path d="M61.25 1.625L70.75 1.5625C70.75 4.77083 70.25 7.79167 69.25 10.625C68.2917 13.4583 66.8958 15.9583 65.0625 18.125C63.2708 20.25 61.125 21.9375 58.625 23.1875C56.1667 24.3958 53.4583 25 50.5 25C46.875 25 43.6667 24.2708 40.875 22.8125C38.125 21.3542 35.125 19.2083 31.875 16.375C29.75 14.4167 27.7917 12.8958 26 11.8125C24.2083 10.7292 22.2708 10.1875 20.1875 10.1875C18.0625 10.1875 16.25 10.7083 14.75 11.75C13.25 12.75 12.0833 14.1875 11.25 16.0625C10.4583 17.9375 10.0625 20.1875 10.0625 22.8125L0 22.9375C0 19.6875 0.479167 16.6667 1.4375 13.875C2.4375 11.0833 3.83333 8.64583 5.625 6.5625C7.41667 4.47917 9.54167 2.875 12 1.75C14.5 0.583333 17.2292 0 20.1875 0C23.8542 0 27.1042 0.770833 29.9375 2.3125C32.8125 3.85417 35.7708 5.97917 38.8125 8.6875C41.1042 10.7708 43.1042 12.3333 44.8125 13.375C46.5625 14.375 48.4583 14.875 50.5 14.875C52.6667 14.875 54.5417 14.3125 56.125 13.1875C57.75 12.0625 59 10.5 59.875 8.5C60.7917 6.5 61.25 4.20833 61.25 1.625Z" fill="currentColor"/>
31-
</svg>
32-
<span className="font-bold sr-only">ns UI</span>
33-
</Link>
34-
35-
<h1 className="mt-32 text-4xl font-bold md:text-nowrap">Shadcn Pricing Blocks</h1>
36-
<p className="mt-4 text-base md:text-lg">Speed up your workflow with responsive, pre-built UI blocks designed for marketing websites.</p>
37-
</div>
38-
</div>
39-
</div>
40-
41-
<div className="divide-y">
42-
<BlockPreview src="https://html.tailus.io/blocks-preview/pricing/one" code="<div/>" title="title 1"/>
43-
<BlockPreview src="https://html.tailus.io/blocks-preview/team/one" code="<div/>" title="title 2"/>
44-
</div>
45-
</div>
46-
);
4+
return (
5+
<>
6+
<BlockPreview src="https://html.tailus.io/blocks-preview/pricing/one" code="<div/>" title="title 1" />
7+
<BlockPreview src="https://html.tailus.io/blocks-preview/team/one" code="<div/>" title="title 2" />
8+
</>
9+
)
4710
}

0 commit comments

Comments
 (0)