Skip to content

Commit f1717be

Browse files
programmer-rahulprogrammer-rahul
committed
added shadcn library
1 parent 2187239 commit f1717be

13 files changed

+4393
-75
lines changed

‎app/components/code-capture/code-image-controls.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
import ControlOptions from "./controls/control-options";
2+
13
export default function CodeImageControls() {
24
return (
3-
<div className="options bg-[#191919] w-full max-w-80 h-full rounded-md"></div>
5+
<div className="options-container bg-[#191919] w-full max-w-80 h-full rounded-md">
6+
<h2 className="text-2xl font-semibold text-center py-2">Options</h2>
7+
8+
<ControlOptions />
9+
</div>
410
);
511
}

‎app/components/code-capture/code-image-preview.tsx

+6-25
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,17 @@
11
import WindowButtons from "./preview/window-buttons";
2+
import WindowContent from "./preview/window-content";
3+
import WindowHeader from "./preview/window-header";
24

35
export default function CodeImagePreview() {
4-
const code = `function Numbers() {
5-
const [number, setNumber] = useNow(0);
6-
7-
setTimeout(
8-
() => setNumber(number++),
9-
1000
10-
);
11-
12-
return <div>The number is {number}</div>
13-
}
14-
`;
15-
166
return (
177
<div className="preview items-center py-3 px-4 flex flex-col w-full rounded-md bg-[#191919]">
188
<div className="preview-box w-full mt-40">
199
{/* frame */}
20-
<div className="frame w-[30rem] mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-orange-400 p-10 rounded-md">
21-
<div className="window flex flex-col">
22-
<div className="window-header rounded-t-md bg-[#353742] flex justify-between w-full py-3 px-4 items-center">
23-
<WindowButtons />
24-
25-
<div className="window-title">
26-
<p>index.js</p>
27-
</div>
28-
<div className="w-16" />
29-
</div>
10+
<div className="frame w-[30rem] mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-blue-400 p-10 rounded-md">
11+
<div className="window flex flex-col bg-[#353742af] border rounded-md border-[#82738E] glass">
12+
<WindowHeader />
3013

31-
<div className="content rounded-b-md bg-[#282a36] py-3 px-4 h-full min-h-20">
32-
<p className="text-xl">{code}</p>
33-
</div>
14+
<WindowContent />
3415
</div>
3516
</div>
3617
</div>

‎app/components/code-capture/controls/control-options.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
"use client";
2+
3+
import {
4+
Select,
5+
SelectContent,
6+
SelectGroup,
7+
SelectItem,
8+
SelectLabel,
9+
SelectTrigger,
10+
SelectValue,
11+
} from "@/components/ui/select";
12+
13+
export default function ControlOptions() {
14+
return (
15+
<div className="options space-y-4 p-2">
16+
<div className="language w-full flex gap-2 items-center">
17+
<div className="option-name w-1/3">Language</div>
18+
<div className="option-input w-full">
19+
<Select>
20+
<SelectTrigger>
21+
<SelectValue placeholder="Javascript" />
22+
</SelectTrigger>
23+
<SelectContent>
24+
<SelectGroup>
25+
<SelectItem value="javascript">Javascript</SelectItem>
26+
<SelectItem value="typescript">Typescript</SelectItem>
27+
<SelectItem value="react">React</SelectItem>
28+
<SelectItem value="html">Html</SelectItem>
29+
<SelectItem value="css">Css</SelectItem>
30+
</SelectGroup>
31+
</SelectContent>
32+
</Select>
33+
</div>
34+
</div>
35+
<div className="theme w-full flex gap-2 items-center">
36+
<div className="option-name w-1/3">Theme</div>
37+
<div className="option-input w-full">
38+
<Select>
39+
<SelectTrigger>
40+
<SelectValue placeholder="Night-Owl" />
41+
</SelectTrigger>
42+
<SelectContent>
43+
<SelectGroup>
44+
<SelectItem value="andromeda">Andromeda</SelectItem>
45+
<SelectItem value="night-owl">Night-Owl</SelectItem>
46+
<SelectItem value="vs-code">Vs-Code</SelectItem>
47+
<SelectItem value="github-dark">Github-Dark</SelectItem>
48+
</SelectGroup>
49+
</SelectContent>
50+
</Select>
51+
</div>
52+
</div>
53+
</div>
54+
);
55+
}

‎app/components/code-capture/preview/window-content.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function WindowContent() {
2+
const code = `function Numbers() {
3+
const [number, setNumber] = useNow(0);
4+
5+
setTimeout(
6+
() => setNumber(number++),
7+
1000
8+
);
9+
10+
return <div>The number is {number}</div>
11+
}
12+
`;
13+
14+
return (
15+
<div className="content rounded-b-md opacity-90 py-3 px-4 h-full min-h-20">
16+
<p className="text-xl">{code}</p>
17+
</div>
18+
);
19+
}

‎app/components/code-capture/preview/window-header.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import WindowButtons from "./window-buttons";
2+
3+
export default function WindowHeader() {
4+
return (
5+
<div className="window-header rounded-t-md flex justify-between w-full py-3 px-4 items-center">
6+
<WindowButtons />
7+
8+
<div className="window-title">
9+
<p>index.js</p>
10+
</div>
11+
<div className="w-16" />
12+
</div>
13+
);
14+
}

‎app/globals.css

+74-31
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,76 @@
11
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
18-
19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
28-
29-
@layer utilities {
30-
.text-balance {
31-
text-wrap: balance;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 0 0% 3.9%;
9+
10+
--card: 0 0% 100%;
11+
--card-foreground: 0 0% 3.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 0 0% 3.9%;
15+
16+
--primary: 0 0% 9%;
17+
--primary-foreground: 0 0% 98%;
18+
19+
--secondary: 0 0% 96.1%;
20+
--secondary-foreground: 0 0% 9%;
21+
22+
--muted: 0 0% 96.1%;
23+
--muted-foreground: 0 0% 45.1%;
24+
25+
--accent: 0 0% 96.1%;
26+
--accent-foreground: 0 0% 9%;
27+
28+
--destructive: 0 84.2% 60.2%;
29+
--destructive-foreground: 0 0% 98%;
30+
31+
--border: 0 0% 89.8%;
32+
--input: 0 0% 89.8%;
33+
--ring: 0 0% 3.9%;
34+
35+
--radius: 0.5rem;
36+
}
37+
38+
.dark {
39+
--background: 0 0% 3.9%;
40+
--foreground: 0 0% 98%;
41+
42+
--card: 0 0% 3.9%;
43+
--card-foreground: 0 0% 98%;
44+
45+
--popover: 0 0% 3.9%;
46+
--popover-foreground: 0 0% 98%;
47+
48+
--primary: 0 0% 98%;
49+
--primary-foreground: 0 0% 9%;
50+
51+
--secondary: 0 0% 14.9%;
52+
--secondary-foreground: 0 0% 98%;
53+
54+
--muted: 0 0% 14.9%;
55+
--muted-foreground: 0 0% 63.9%;
56+
57+
--accent: 0 0% 14.9%;
58+
--accent-foreground: 0 0% 98%;
59+
60+
--destructive: 0 62.8% 30.6%;
61+
--destructive-foreground: 0 0% 98%;
62+
63+
--border: 0 0% 14.9%;
64+
--input: 0 0% 14.9%;
65+
--ring: 0 0% 83.1%;
66+
}
3267
}
33-
}
68+
69+
@layer base {
70+
* {
71+
@apply border-border;
72+
}
73+
body {
74+
@apply bg-background text-foreground;
75+
}
76+
}

‎app/layout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Inter } from "next/font/google";
33
import "./globals.css";
4+
import { cn } from "@/lib/utils";
45

56
const inter = Inter({ subsets: ["latin"] });
67

@@ -17,7 +18,7 @@ export default function RootLayout({
1718
}>) {
1819
return (
1920
<html lang="en">
20-
<body className={inter.className}>{children}</body>
21+
<body className={cn("dark", inter.className)}>{children}</body>
2122
</html>
2223
);
2324
}

‎components.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

0 commit comments

Comments
 (0)