Skip to content

Commit 52683f6

Browse files
RodrigoLuglioRodrigoLuglio
committed
Changes in the ui
1 parent 93dbb38 commit 52683f6

11 files changed

+385
-115
lines changed

Diff for: ‎bun.lockb

2.86 KB
Binary file not shown.

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"@monaco-editor/react": "^4.6.0",
1313
"@radix-ui/react-checkbox": "^1.1.1",
14+
"@radix-ui/react-dropdown-menu": "^2.1.1",
1415
"@radix-ui/react-select": "^2.1.1",
1516
"@radix-ui/react-slider": "^1.2.0",
1617
"@radix-ui/react-slot": "^1.1.0",
@@ -21,6 +22,7 @@
2122
"lucide-react": "^0.438.0",
2223
"monaco-editor": "^0.51.0",
2324
"next": "15.0.0-rc.0",
25+
"next-themes": "^0.3.0",
2426
"react": "19.0.0-rc-f994737d14-20240522",
2527
"react-colorful": "^5.6.1",
2628
"react-dom": "19.0.0-rc-f994737d14-20240522",

Diff for: ‎src/app/layout.tsx

+20-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
1-
import type { Metadata } from "next";
2-
import "./globals.css";
1+
import type { Metadata } from 'next'
2+
import './globals.css'
33

4-
import { Inter } from "next/font/google";
4+
import { Inter } from 'next/font/google'
5+
import { ThemeProvider } from '@/components/ThemeProvider'
56

6-
const inter = Inter({ subsets: ["latin"] });
7+
const inter = Inter({ subsets: ['latin'] })
78

89
export const metadata: Metadata = {
9-
title: "VS Code Theme Generator",
10-
description: "Generate custom VS Code themes",
11-
};
10+
title: 'VS Code Theme Generator',
11+
description: 'Generate custom VS Code themes',
12+
}
1213

1314
export default function RootLayout({
1415
children,
1516
}: Readonly<{
16-
children: React.ReactNode;
17+
children: React.ReactNode
1718
}>) {
1819
return (
1920
<html lang="en">
20-
<body className={inter.className}>{children}</body>
21+
<body className={inter.className}>
22+
<ThemeProvider
23+
attribute="class"
24+
defaultTheme="dark"
25+
enableSystem
26+
disableTransitionOnChange
27+
>
28+
{children}
29+
</ThemeProvider>
30+
</body>
2131
</html>
22-
);
32+
)
2333
}

Diff for: ‎src/app/page.tsx

+30-34
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,17 @@
22

33
import React, { ErrorInfo } from 'react'
44
import { ThemeProvider } from '@/contexts/ThemeContext'
5-
// import ThemeControls from "@/components/ThemeControls";
6-
// import ColorList from "@/components/ColorList";
5+
76
import ActiveColorPicker from '@/components/ActiveColorPicker'
8-
import ThemePreview from '@/components/ThemePreview'
97
import ExportButton from '@/components/ExportButton'
10-
// import AnsiColorList from "@/components/AnsiColorList";
118

12-
import dynamic from 'next/dynamic'
9+
import ThemePreview from '@/components/ThemePreview'
10+
import ThemeControls from '@/components/ThemeControls'
1311
import SyntaxColorList from '@/components/SyntaxColorList'
14-
const ThemeControls = dynamic(() => import('@/components/ThemeControls'), {
15-
ssr: false,
16-
})
17-
const ColorList = dynamic(() => import('@/components/ColorList'), {
18-
ssr: false,
19-
})
20-
const AnsiColorList = dynamic(() => import('@/components/AnsiColorList'), {
21-
ssr: false,
22-
})
12+
import ColorList from '@/components/ColorList'
13+
import AnsiColorList from '@/components/AnsiColorList'
14+
15+
import { useTheme } from '@/contexts/ThemeContext'
2316

2417
class ErrorBoundary extends React.Component<
2518
{ children: React.ReactNode },
@@ -48,32 +41,35 @@ class ErrorBoundary extends React.Component<
4841
}
4942

5043
const ThemeGenerator = () => {
44+
const { colors } = useTheme()
5145
return (
52-
<div className="container mx-auto p-4">
53-
<h1 className="text-2xl font-bold mb-4">VS Code Theme Generator</h1>
54-
<div className="flex flex-wrap lg:flex-nowrap gap-10">
55-
<div className="flex flex-col gap-4 w-full lg:w-7/12">
56-
<div className="flex gap-10 items-end">
57-
<ThemeControls />
58-
<ActiveColorPicker />
46+
<section style={{ backgroundColor: colors.BG1 }}>
47+
<div className="container mx-auto p-4">
48+
<h1 className="text-2xl font-bold mb-4">VS Code Theme Generator</h1>
49+
<div className="flex flex-wrap lg:flex-nowrap gap-10">
50+
<div className="flex flex-col gap-4 w-full lg:w-7/12">
51+
<div className="flex gap-10 items-end">
52+
<ThemeControls />
53+
<ActiveColorPicker />
54+
</div>
55+
<SyntaxColorList title="Syntax Colors" isThemeColors={false} />
5956
</div>
60-
<SyntaxColorList title="Syntax Colors" isThemeColors={false} />
61-
</div>
6257

63-
<div className="flex flex-col gap-2 w-full lg:w-5/12">
64-
<div className="">
65-
<ThemePreview />
66-
</div>
67-
<ColorList title="Theme Colors" isThemeColors={true} />
58+
<div className="flex flex-col gap-2 w-full lg:w-5/12">
59+
<div className="">
60+
<ThemePreview />
61+
</div>
62+
<ColorList title="Theme Colors" isThemeColors={true} />
6863

69-
<div className=""></div>
64+
<div className=""></div>
65+
</div>
66+
</div>
67+
<AnsiColorList />
68+
<div className="mt-4 flex justify-end">
69+
<ExportButton />
7070
</div>
7171
</div>
72-
<AnsiColorList />
73-
<div className="mt-4 flex justify-end">
74-
<ExportButton />
75-
</div>
76-
</div>
72+
</section>
7773
)
7874
}
7975

Diff for: ‎src/components/AnsiColorList.tsx

+46-41
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,79 @@
1-
import React from "react";
2-
import { useTheme } from "../contexts/ThemeContext";
3-
import Color from "color";
4-
import { Copy } from "lucide-react";
1+
import React from 'react'
2+
import { useTheme } from '../contexts/ThemeContext'
3+
import Color from 'color'
4+
import { Copy } from 'lucide-react'
5+
import { Button } from './ui/button'
56

67
const AnsiColorList: React.FC = () => {
7-
const { ansiColors, setActiveColor } = useTheme();
8+
const { ansiColors, setActiveColor, colors } = useTheme()
89

910
const copyToClipboard = (color: string) => {
1011
navigator.clipboard.writeText(color).then(
1112
() => {
12-
console.log("Color copied to clipboard");
13+
console.log('Color copied to clipboard')
1314
},
1415
(err) => {
15-
console.error("Could not copy text: ", err);
16+
console.error('Could not copy text: ', err)
1617
}
17-
);
18-
};
18+
)
19+
}
1920

2021
const colorPairs = [
21-
["Black", "BrightBlack"],
22-
["Red", "BrightRed"],
23-
["Green", "BrightGreen"],
24-
["Yellow", "BrightYellow"],
25-
["Blue", "BrightBlue"],
26-
["Magenta", "BrightMagenta"],
27-
["Cyan", "BrightCyan"],
28-
["White", "BrightWhite"],
29-
];
22+
['Black', 'BrightBlack'],
23+
['Red', 'BrightRed'],
24+
['Green', 'BrightGreen'],
25+
['Yellow', 'BrightYellow'],
26+
['Blue', 'BrightBlue'],
27+
['Magenta', 'BrightMagenta'],
28+
['Cyan', 'BrightCyan'],
29+
['White', 'BrightWhite'],
30+
]
3031

3132
const ColorBox = ({
3233
colorKey,
3334
colorValue,
3435
}: {
35-
colorKey: string;
36-
colorValue: string;
36+
colorKey: string
37+
colorValue: string
3738
}) => (
3839
<div
39-
className="w-full h-12 flex items-center justify-between px-2 cursor-pointer"
40-
style={{ backgroundColor: colorValue }}
40+
className="w-full h-7 flex items-center justify-between px-2 cursor-pointer"
41+
style={{
42+
// backgroundColor: colorValue,
43+
borderBottom: '1px solid',
44+
borderBottomColor: colorValue,
45+
}}
4146
onClick={() => setActiveColor(`ansi${colorKey}`)}
4247
>
4348
<span
4449
className="text-xs font-semibold truncate"
45-
style={{ color: Color(colorValue).isLight() ? "#000" : "#fff" }}
50+
style={{ color: colorValue }}
4651
>
4752
{colorKey}
4853
</span>
49-
<button
50-
className="text-xs p-1 rounded"
51-
onClick={(e) => {
52-
e.stopPropagation();
53-
copyToClipboard(colorValue);
54-
}}
55-
style={{
56-
backgroundColor: Color(colorValue).isLight()
57-
? "rgba(0,0,0,0.1)"
58-
: "rgba(255,255,255,0.1)",
54+
<Button
55+
variant="ghost"
56+
size="icon"
57+
className="h-5 w-5"
58+
onClick={(e: React.MouseEvent) => {
59+
e.stopPropagation()
60+
copyToClipboard(colorValue)
5961
}}
6062
>
61-
<Copy color={Color(colorValue).isLight() ? "#000" : "#fff"} />
62-
</button>
63+
<Copy size={16} color={colorValue} />
64+
</Button>
6365
</div>
64-
);
66+
)
6567

6668
return (
6769
<div className="mb-4">
6870
<h2 className="text-xl font-semibold mb-2">ANSI Colors</h2>
69-
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
71+
<div
72+
className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2 p-4"
73+
style={{ backgroundColor: colors.BG1 }}
74+
>
7075
{colorPairs.map(([color, brightColor]) => (
71-
<div key={color} className="flex flex-col gap-1">
76+
<div key={color} className="flex flex-col gap-2">
7277
<ColorBox
7378
colorKey={color}
7479
colorValue={ansiColors[color as keyof typeof ansiColors]}
@@ -81,7 +86,7 @@ const AnsiColorList: React.FC = () => {
8186
))}
8287
</div>
8388
</div>
84-
);
85-
};
89+
)
90+
}
8691

87-
export default AnsiColorList;
92+
export default AnsiColorList

Diff for: ‎src/components/ColorList.tsx

+17-14
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,10 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
7979
>
8080
{key}
8181
</span>
82-
<div className="flex space-x-1">
82+
<div className="flex gap-2">
8383
<Button
84-
variant="ghost"
8584
size="icon"
86-
className=""
85+
className="h-5 w-5"
8786
onClick={(e) => {
8887
e.stopPropagation()
8988
copyToClipboard(value)
@@ -99,8 +98,9 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
9998
color={Color(value).isLight() ? '#000' : '#fff'}
10099
/>
101100
</Button>
102-
<button
103-
className="text-xs p-1 rounded"
101+
<Button
102+
className="h-5 w-5"
103+
size="icon"
104104
onClick={(e) => {
105105
e.stopPropagation()
106106
toggleColorLock(key)
@@ -112,22 +112,25 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
112112
}}
113113
>
114114
{lockedColors.has(key) ? (
115-
<Lock color={Color(value).isLight() ? '#000' : '#fff'} />
115+
<Lock
116+
size={16}
117+
color={Color(value).isLight() ? '#000' : '#fff'}
118+
/>
116119
) : (
117-
<Unlock color={Color(value).isLight() ? '#000' : '#fff'} />
120+
<Unlock
121+
size={16}
122+
color={Color(value).isLight() ? '#000' : '#fff'}
123+
/>
118124
)}
119-
</button>
125+
</Button>
120126
</div>
121127
</div>
122128
</div>
123129
))}
124-
<div className="relative">
125-
<button
126-
className="w-full h-12 bg-gray-200 text-gray-700 text-xs font-semibold"
127-
onClick={handleUnlockAll}
128-
>
130+
<div className="relative self-center place-self-center">
131+
<Button size={'sm'} className="" onClick={handleUnlockAll}>
129132
Unlock All
130-
</button>
133+
</Button>
131134
</div>
132135
</div>
133136
</div>

Diff for: ‎src/components/ModeToggle.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use client'
2+
3+
import * as React from 'react'
4+
import { Moon, Sun } from 'lucide-react'
5+
import { useTheme } from 'next-themes'
6+
7+
import { Button } from '@/components/ui/button'
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from '@/components/ui/dropdown-menu'
14+
15+
import { useTheme as useThemeContext } from '@/contexts/ThemeContext'
16+
17+
export function ModeToggle() {
18+
const { setTheme, resolvedTheme } = useTheme()
19+
const { setIsDark } = useThemeContext()
20+
21+
const handleModeChange = (mode: string) => {
22+
setTheme(mode)
23+
switch (mode) {
24+
case 'light':
25+
console.log('MODE: ', mode)
26+
setIsDark(false)
27+
break
28+
case 'dark':
29+
console.log('MODE: ', mode)
30+
setIsDark(true)
31+
break
32+
default:
33+
break
34+
}
35+
}
36+
37+
return (
38+
<DropdownMenu>
39+
<DropdownMenuTrigger asChild>
40+
<Button size="icon">
41+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
42+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
43+
<span className="sr-only">Toggle theme</span>
44+
</Button>
45+
</DropdownMenuTrigger>
46+
<DropdownMenuContent align="end">
47+
<DropdownMenuItem onClick={() => handleModeChange('light')}>
48+
Light
49+
</DropdownMenuItem>
50+
<DropdownMenuItem onClick={() => handleModeChange('dark')}>
51+
Dark
52+
</DropdownMenuItem>
53+
</DropdownMenuContent>
54+
</DropdownMenu>
55+
)
56+
}

0 commit comments

Comments
 (0)