Skip to content

Commit 0cce527

Browse files
pratik-fsdetpratik-fsdet
committed
Improve code structure with ShadCN
1 parent 36e3de2 commit 0cce527

25 files changed

+1265
-568
lines changed

‎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": "src/app/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎package.json

+14-3
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,17 @@
1313
},
1414
"dependencies": {
1515
"@heroicons/react": "^2.1.1",
16-
"@mantine/core": "^7.5.1",
17-
"@mantine/hooks": "^7.5.1",
16+
"@radix-ui/react-accordion": "^1.1.2",
17+
"@radix-ui/react-dialog": "^1.0.5",
18+
"@radix-ui/react-select": "^2.0.0",
19+
"@radix-ui/react-slot": "^1.0.2",
20+
"@radix-ui/react-tabs": "^1.0.4",
21+
"@radix-ui/react-toggle": "^1.0.3",
22+
"@radix-ui/react-toggle-group": "^1.0.4",
23+
"@radix-ui/react-tooltip": "^1.0.7",
24+
"class-variance-authority": "^0.7.0",
25+
"clsx": "^2.1.0",
26+
"lucide-react": "^0.323.0",
1827
"next": "14.1.0",
1928
"react": "^18",
2029
"react-dnd": "^16.0.1",
@@ -23,7 +32,9 @@
2332
"react-draggable": "^4.4.6",
2433
"react-icons": "^5.0.1",
2534
"react-monaco-editor": "^0.55.0",
26-
"react-resizable": "^3.0.5"
35+
"react-resizable": "^3.0.5",
36+
"tailwind-merge": "^2.2.1",
37+
"tailwindcss-animate": "^1.0.7"
2738
},
2839
"devDependencies": {
2940
"@types/node": "^20",

‎src/app/globals.css

+73
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,79 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
10+
--card: 0 0% 100%;
11+
--card-foreground: 222.2 84% 4.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 222.2 84% 4.9%;
15+
16+
--primary: 222.2 47.4% 11.2%;
17+
--primary-foreground: 210 40% 98%;
18+
19+
--secondary: 210 40% 96.1%;
20+
--secondary-foreground: 222.2 47.4% 11.2%;
21+
22+
--muted: 210 40% 96.1%;
23+
--muted-foreground: 215.4 16.3% 46.9%;
24+
25+
--accent: 210 40% 96.1%;
26+
--accent-foreground: 222.2 47.4% 11.2%;
27+
28+
--destructive: 0 84.2% 60.2%;
29+
--destructive-foreground: 210 40% 98%;
30+
31+
--border: 214.3 31.8% 91.4%;
32+
--input: 214.3 31.8% 91.4%;
33+
--ring: 222.2 84% 4.9%;
34+
35+
--radius: 0.5rem;
36+
}
37+
38+
.dark {
39+
--background: 222.2 84% 4.9%;
40+
--foreground: 210 40% 98%;
41+
42+
--card: 222.2 84% 4.9%;
43+
--card-foreground: 210 40% 98%;
44+
45+
--popover: 222.2 84% 4.9%;
46+
--popover-foreground: 210 40% 98%;
47+
48+
--primary: 210 40% 98%;
49+
--primary-foreground: 222.2 47.4% 11.2%;
50+
51+
--secondary: 217.2 32.6% 17.5%;
52+
--secondary-foreground: 210 40% 98%;
53+
54+
--muted: 217.2 32.6% 17.5%;
55+
--muted-foreground: 215 20.2% 65.1%;
56+
57+
--accent: 217.2 32.6% 17.5%;
58+
--accent-foreground: 210 40% 98%;
59+
60+
--destructive: 0 62.8% 30.6%;
61+
--destructive-foreground: 210 40% 98%;
62+
63+
--border: 217.2 32.6% 17.5%;
64+
--input: 217.2 32.6% 17.5%;
65+
--ring: 212.7 26.8% 83.9%;
66+
}
67+
}
68+
69+
@layer base {
70+
* {
71+
@apply border-border;
72+
}
73+
body {
74+
@apply bg-background text-foreground;
75+
}
76+
}
77+
578
* {
679
scrollbar-color: #464646 #282c34;
780
scrollbar-width: none;

‎src/app/layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { Metadata } from 'next'
22
import { Inter } from 'next/font/google'
3-
import { MantineProvider } from '@mantine/core'
4-
import '@mantine/core/styles.css'
53
import './globals.css'
4+
import { TooltipProvider } from '@/components/ui/tooltip'
65
const inter = Inter({ subsets: ['latin'] })
76

87
export const metadata: Metadata = {
@@ -18,7 +17,7 @@ export default function RootLayout({
1817
return (
1918
<html lang="en">
2019
<body className={inter.className}>
21-
<MantineProvider>{children}</MantineProvider>
20+
<TooltipProvider delayDuration={50}>{children}</TooltipProvider>
2221
</body>
2322
</html>
2423
)

‎src/app/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
66
import { DndProvider } from 'react-dnd'
77
import CodeEditor from '@/components/code_editor/codeEditor'
88
import { useState } from 'react'
9+
import { Button } from '@/components/ui/button'
910

1011
interface DroppedItem {
1112
subTab: {

‎src/components/code_editor/codeEditor.tsx

+59-49
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
// CodeEditor.tsx
21
import { DroppedItem } from '@/types/types'
32
import React from 'react'
43
import MonacoEditor from 'react-monaco-editor'
5-
import { Button, Select, Tabs, Tooltip } from '@mantine/core'
64
import { FaFileDownload } from 'react-icons/fa'
75
import { FaDownload } from 'react-icons/fa'
6+
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
7+
import { TooltipContent, TooltipTrigger, Tooltip } from '../ui/tooltip'
8+
import {
9+
SelectContent,
10+
Select,
11+
SelectItem,
12+
SelectTrigger,
13+
SelectValue,
14+
} from '../ui/select'
15+
import { Button } from '../ui/button'
16+
817
interface CodeEditorProps {
918
droppedItems: DroppedItem[]
1019
}
1120

1221
const CodeEditor: React.FC<CodeEditorProps> = ({ droppedItems }) => {
13-
// Extract relevant data from droppedItems and format it as needed
1422
const code = droppedItems
1523
.map(
1624
(item) =>
@@ -23,56 +31,58 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ droppedItems }) => {
2331

2432
return (
2533
<div className="absolute top-[4rem] right-0 w-[25%] border-zinc-200 border-[1px] bg-white">
26-
<div className="my-2 space-y-1">
27-
<Tabs defaultValue="gallery">
28-
<Tabs.List>
29-
<Tabs.Tab value="gallery" className="uppercase w-full">
34+
<div className="mb-2 space-y-1">
35+
<Tabs defaultValue="gallery" className="w-full">
36+
<TabsList className="w-full">
37+
<TabsTrigger value="gallery" className="uppercase w-full">
3038
TerraForm Code
31-
</Tabs.Tab>
32-
</Tabs.List>
39+
</TabsTrigger>
40+
</TabsList>
3341
</Tabs>
34-
<div className="grid grid-cols-2">
35-
<Select
36-
className="mx-2 w-fit"
37-
defaultValue={'main.tf'}
38-
checkIconPosition="right"
39-
placeholder="Pick value"
40-
data={['main.tf']}
41-
/>
42-
<Button.Group>
43-
<Tooltip
44-
withArrow
45-
label={'Download Selected File'}
46-
transitionProps={{
47-
transition: 'fade',
48-
duration: 200,
49-
}}
50-
className="font-medium shadow-2xl border-[1px] border-gray-200 text-[#003ab7]"
51-
position="bottom"
52-
arrowSize={6}
53-
color="#fff"
54-
>
55-
<Button className="text-zinc-500 w-fit border-zinc-200">
56-
<FaFileDownload />
57-
</Button>
42+
<div className="grid grid-cols-2 gap-2 px-2">
43+
<Tooltip>
44+
<TooltipTrigger>
45+
<Select defaultValue={'aws'}>
46+
<SelectTrigger className="w-full focus-visible:ring-1">
47+
<SelectValue placeholder="Select the service provider" />
48+
</SelectTrigger>
49+
<SelectContent>
50+
<SelectItem value="aws">main.tf</SelectItem>
51+
</SelectContent>
52+
</Select>
53+
</TooltipTrigger>
54+
<TooltipContent>
55+
<p className="font-medium shadow-2xl border-[1px] border-gray-200 text-[#003ab7]">
56+
Select a tf file
57+
</p>
58+
</TooltipContent>
59+
</Tooltip>
60+
<div className="space-x-2">
61+
<Tooltip>
62+
<TooltipTrigger>
63+
<Button className="text-zinc-600 w-fit border-zinc-200 bg-zinc-100 hover:bg-white hover:text-black">
64+
<FaFileDownload />
65+
</Button>
66+
</TooltipTrigger>
67+
<TooltipContent>
68+
<p className="font-medium shadow-2xl border-[1px] border-gray-200 text-[#003ab7]">
69+
Download Selected File
70+
</p>
71+
</TooltipContent>
5872
</Tooltip>
59-
<Tooltip
60-
withArrow
61-
label={'Download All Files'}
62-
transitionProps={{
63-
transition: 'fade',
64-
duration: 200,
65-
}}
66-
className="font-medium shadow-2xl border-[1px] border-gray-200 text-[#003ab7]"
67-
position="bottom"
68-
arrowSize={6}
69-
color="#fff"
70-
>
71-
<Button className="text-zinc-500 w-fit border-zinc-200">
72-
<FaDownload />
73-
</Button>
73+
<Tooltip>
74+
<TooltipTrigger>
75+
<Button className="text-zinc-600 w-fit border-zinc-200 bg-zinc-100 hover:bg-white hover:text-black">
76+
<FaDownload />
77+
</Button>
78+
</TooltipTrigger>
79+
<TooltipContent>
80+
<p className="font-medium shadow-2xl border-[1px] border-gray-200 text-[#003ab7]">
81+
Download All Files
82+
</p>
83+
</TooltipContent>
7484
</Tooltip>
75-
</Button.Group>
85+
</div>
7686
</div>
7787
</div>
7888
<MonacoEditor

0 commit comments

Comments
 (0)