Skip to content

Commit 5362993

Browse files
pphatdevpphatdev
committed
🤖 Setup Initialize Blog
1 parent 17d6ff6 commit 5362993

File tree

10 files changed

+353
-81
lines changed

10 files changed

+353
-81
lines changed

‎app/globals.css‎

Lines changed: 109 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,122 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
23

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
6-
}
4+
@custom-variant dark (&:is(.dark *));
75

86
@theme inline {
97
--color-background: var(--background);
108
--color-foreground: var(--foreground);
119
--font-sans: var(--font-geist-sans);
1210
--font-mono: var(--font-geist-mono);
11+
--color-sidebar-ring: var(--sidebar-ring);
12+
--color-sidebar-border: var(--sidebar-border);
13+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14+
--color-sidebar-accent: var(--sidebar-accent);
15+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16+
--color-sidebar-primary: var(--sidebar-primary);
17+
--color-sidebar-foreground: var(--sidebar-foreground);
18+
--color-sidebar: var(--sidebar);
19+
--color-chart-5: var(--chart-5);
20+
--color-chart-4: var(--chart-4);
21+
--color-chart-3: var(--chart-3);
22+
--color-chart-2: var(--chart-2);
23+
--color-chart-1: var(--chart-1);
24+
--color-ring: var(--ring);
25+
--color-input: var(--input);
26+
--color-border: var(--border);
27+
--color-destructive: var(--destructive);
28+
--color-accent-foreground: var(--accent-foreground);
29+
--color-accent: var(--accent);
30+
--color-muted-foreground: var(--muted-foreground);
31+
--color-muted: var(--muted);
32+
--color-secondary-foreground: var(--secondary-foreground);
33+
--color-secondary: var(--secondary);
34+
--color-primary-foreground: var(--primary-foreground);
35+
--color-primary: var(--primary);
36+
--color-popover-foreground: var(--popover-foreground);
37+
--color-popover: var(--popover);
38+
--color-card-foreground: var(--card-foreground);
39+
--color-card: var(--card);
40+
--radius-sm: calc(var(--radius) - 4px);
41+
--radius-md: calc(var(--radius) - 2px);
42+
--radius-lg: var(--radius);
43+
--radius-xl: calc(var(--radius) + 4px);
1344
}
1445

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
46+
:root {
47+
--radius: 0.625rem;
48+
--background: oklch(1 0 0);
49+
--foreground: oklch(0.145 0 0);
50+
--card: oklch(1 0 0);
51+
--card-foreground: oklch(0.145 0 0);
52+
--popover: oklch(1 0 0);
53+
--popover-foreground: oklch(0.145 0 0);
54+
--primary: oklch(0.205 0 0);
55+
--primary-foreground: oklch(0.985 0 0);
56+
--secondary: oklch(0.97 0 0);
57+
--secondary-foreground: oklch(0.205 0 0);
58+
--muted: oklch(0.97 0 0);
59+
--muted-foreground: oklch(0.556 0 0);
60+
--accent: oklch(0.97 0 0);
61+
--accent-foreground: oklch(0.205 0 0);
62+
--destructive: oklch(0.577 0.245 27.325);
63+
--border: oklch(0.922 0 0);
64+
--input: oklch(0.922 0 0);
65+
--ring: oklch(0.708 0 0);
66+
--chart-1: oklch(0.646 0.222 41.116);
67+
--chart-2: oklch(0.6 0.118 184.704);
68+
--chart-3: oklch(0.398 0.07 227.392);
69+
--chart-4: oklch(0.828 0.189 84.429);
70+
--chart-5: oklch(0.769 0.188 70.08);
71+
--sidebar: oklch(0.985 0 0);
72+
--sidebar-foreground: oklch(0.145 0 0);
73+
--sidebar-primary: oklch(0.205 0 0);
74+
--sidebar-primary-foreground: oklch(0.985 0 0);
75+
--sidebar-accent: oklch(0.97 0 0);
76+
--sidebar-accent-foreground: oklch(0.205 0 0);
77+
--sidebar-border: oklch(0.922 0 0);
78+
--sidebar-ring: oklch(0.708 0 0);
2079
}
2180

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
81+
.dark {
82+
--background: oklch(0.145 0 0);
83+
--foreground: oklch(0.985 0 0);
84+
--card: oklch(0.205 0 0);
85+
--card-foreground: oklch(0.985 0 0);
86+
--popover: oklch(0.205 0 0);
87+
--popover-foreground: oklch(0.985 0 0);
88+
--primary: oklch(0.922 0 0);
89+
--primary-foreground: oklch(0.205 0 0);
90+
--secondary: oklch(0.269 0 0);
91+
--secondary-foreground: oklch(0.985 0 0);
92+
--muted: oklch(0.269 0 0);
93+
--muted-foreground: oklch(0.708 0 0);
94+
--accent: oklch(0.269 0 0);
95+
--accent-foreground: oklch(0.985 0 0);
96+
--destructive: oklch(0.704 0.191 22.216);
97+
--border: oklch(1 0 0 / 10%);
98+
--input: oklch(1 0 0 / 15%);
99+
--ring: oklch(0.556 0 0);
100+
--chart-1: oklch(0.488 0.243 264.376);
101+
--chart-2: oklch(0.696 0.17 162.48);
102+
--chart-3: oklch(0.769 0.188 70.08);
103+
--chart-4: oklch(0.627 0.265 303.9);
104+
--chart-5: oklch(0.645 0.246 16.439);
105+
--sidebar: oklch(0.205 0 0);
106+
--sidebar-foreground: oklch(0.985 0 0);
107+
--sidebar-primary: oklch(0.488 0.243 264.376);
108+
--sidebar-primary-foreground: oklch(0.985 0 0);
109+
--sidebar-accent: oklch(0.269 0 0);
110+
--sidebar-accent-foreground: oklch(0.985 0 0);
111+
--sidebar-border: oklch(1 0 0 / 10%);
112+
--sidebar-ring: oklch(0.556 0 0);
113+
}
114+
115+
@layer base {
116+
* {
117+
@apply border-border outline-ring/50;
118+
}
119+
body {
120+
@apply bg-background text-foreground;
121+
}
26122
}

‎app/page.tsx‎

Lines changed: 50 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,51 @@
1-
import Image from "next/image";
1+
import { GithubIcon } from "@/components/icons/github";
2+
import { SearchIcon } from "@/components/icons/search";
3+
import { VisualStudioCodeIcon } from "@/components/icons/vscode";
4+
import { WindowsIcon } from "@/components/icons/windows";
5+
import { cn } from "@/lib/utils";
26

3-
export default function Home() {
4-
return (
5-
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={100}
12-
height={20}
13-
priority
14-
/>
15-
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17-
To get started, edit the page.tsx file.
18-
</h1>
19-
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20-
Looking for a starting point or more instructions? Head over to{" "}
21-
<a
22-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
23-
className="font-medium text-zinc-950 dark:text-zinc-50"
24-
>
25-
Templates
26-
</a>{" "}
27-
or the{" "}
28-
<a
29-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
className="font-medium text-zinc-950 dark:text-zinc-50"
31-
>
32-
Learning
33-
</a>{" "}
34-
center.
35-
</p>
36-
</div>
37-
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
38-
<a
39-
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
40-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
>
44-
<Image
45-
className="dark:invert"
46-
src="/vercel.svg"
47-
alt="Vercel logomark"
48-
width={16}
49-
height={16}
50-
/>
51-
Deploy Now
52-
</a>
53-
<a
54-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
55-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
Documentation
60-
</a>
61-
</div>
62-
</main>
63-
</div>
64-
);
65-
}
7+
const menuItems = [
8+
{
9+
name: 'Windows',
10+
href: '#',
11+
icon: WindowsIcon,
12+
className: '',
13+
},
14+
{
15+
name: 'Search',
16+
href: '#',
17+
icon: SearchIcon,
18+
className: 'text-gray-500 size-6',
19+
},
20+
{
21+
name: 'GitHub',
22+
href: '#',
23+
icon: GithubIcon,
24+
className: 'text-gray-600 size-7',
25+
},
26+
{
27+
name: 'VS Code',
28+
href: '#',
29+
icon: VisualStudioCodeIcon,
30+
className: 'text-blue-500 size-7 mt-0.5',
31+
},
32+
];
33+
34+
35+
export default function HomePage() {
36+
return (
37+
<main className="min-h-screen relative bg-amber-50">
38+
<footer className="fixed bottom-0 inset-x-0 border-t backdrop-blur-sm border-black/5 bg-white/50">
39+
<ul className="flex w-full max-w-3xl mx-auto justify-center py-1.5 gap-1">
40+
{menuItems.map((item) => (
41+
<li key={item.name}>
42+
<a href={item.href} className="relative flex items-center justify-center size-9 rounded-lg hover:bg-white hover:shadow-lg duration-400 shadow-black/10 transition-colors">
43+
<item.icon className={cn('size-7 text-gray-600', item.className )} />
44+
</a>
45+
</li>
46+
))}
47+
</ul>
48+
</footer>
49+
</main>
50+
);
51+
}

‎components.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {}
22+
}

‎components/icons/github.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="currentColor"
7+
aria-hidden="true"
8+
{...props}
9+
>
10+
<path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"></path>
11+
</svg>
12+
);
13+
}

‎components/icons/search.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="currentColor"
7+
stroke="currentColor"
8+
strokeWidth="1.5"
9+
aria-hidden="true"
10+
{...props}>
11+
<path d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z"></path>
12+
</svg>
13+
);
14+
}

‎components/icons/vscode.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function VisualStudioCodeIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 48 48"
6+
fill="currentColor"
7+
aria-hidden="true"
8+
{...props}
9+
>
10+
<path d="M32.59 41.758a2.41 2.41 0 0 1-2.77-.474L14.448 27.188l-6.695 5.109a1.618 1.618 0 0 1-2.074-.093l-2.147-1.963a1.64 1.64 0 0 1-.002-2.416L9.336 22.5 3.53 17.175a1.64 1.64 0 0 1 .002-2.416l2.147-1.963a1.618 1.618 0 0 1 2.074-.093l6.695 5.109L29.82 3.716a2.419 2.419 0 0 1 2.77-.475l8.03 3.884A2.451 2.451 0 0 1 42 9.333V24h-9.744V13.601L20.593 22.5l11.663 8.899V24H42v11.667c0 .941-.537 1.8-1.38 2.208l-8.03 3.883Z"></path>
11+
</svg>
12+
);
13+
}

‎components/icons/windows.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export function WindowsIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 32 32"
6+
fill="none"
7+
aria-hidden="true"
8+
{...props}
9+
>
10+
<path d="M3 6C3 4.34315 4.34315 3 6 3H14C15.6569 3 17 4.34315 17 6V15C17 15.5523 16.5523 16 16 16H4C3.44772 16 3 15.5523 3 15V6Z" fill="url(#paint0_linear_13847_1432)"/>
11+
<path d="M26 15C27.6569 15 29 16.3431 29 18V26C29 27.6569 27.6569 29 26 29H16C15.4477 29 15 28.5523 15 28L15 16C15 15.4477 15.4477 15 16 15L26 15Z" fill="url(#paint1_linear_13847_1432)"/>
12+
<path d="M17 28C17 28.5523 16.5523 29 16 29L6 29C4.34315 29 3 27.6569 3 26L3 16C3 15.4477 3.44772 15 4 15L16 15C16.5523 15 17 15.4477 17 16L17 28Z" fill="url(#paint2_linear_13847_1432)"/>
13+
<path d="M20.2002 2.95326C21.4696 1.68433 23.5276 1.68455 24.7968 2.95376L29.0454 7.20233C30.3146 8.47154 30.3144 10.5291 29.0449 11.798L24.7954 16.0457C23.526 17.3146 21.4679 17.3144 20.1987 16.0452L15.9502 11.7966C14.681 10.5274 14.6812 8.46985 15.9507 7.20092L20.2002 2.95326Z" fill="url(#paint3_linear_13847_1432)"/>
14+
<defs>
15+
<linearGradient id="paint0_linear_13847_1432" x1="3" y1="3" x2="15.9644" y2="16.9616" gradientUnits="userSpaceOnUse">
16+
<stop stopColor="#B9C0C7"/>
17+
<stop offset="1" stopColor="#889096"/>
18+
</linearGradient>
19+
<linearGradient id="paint1_linear_13847_1432" x1="29" y1="28" x2="16" y2="15" gradientUnits="userSpaceOnUse">
20+
<stop stopColor="#63686E"/>
21+
<stop offset="1" stopColor="#889096"/>
22+
</linearGradient>
23+
<linearGradient id="paint2_linear_13847_1432" x1="3" y1="15" x2="17" y2="24" gradientUnits="userSpaceOnUse">
24+
<stop stopColor="#55595E"/>
25+
<stop offset="1" stopColor="#383B3D"/>
26+
</linearGradient>
27+
<linearGradient id="paint3_linear_13847_1432" x1="27.3972" y1="13.6251" x2="18.9034" y2="3.14546" gradientUnits="userSpaceOnUse">
28+
<stop stopColor="#2764E7"/>
29+
<stop offset="1" stopColor="#36DFF1"/>
30+
</linearGradient>
31+
</defs>
32+
</svg>
33+
);
34+
}

‎lib/utils.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

0 commit comments

Comments
 (0)