Skip to content

Commit a6187d7

Browse files
MiladSadeghiMiladSadeghi
committed
feat(web): Implement argocd service of terraform template
1 parent 6589dcc commit a6187d7

7 files changed

Lines changed: 177 additions & 175 deletions

File tree

‎web/components.json‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎web/package-lock.json‎

Lines changed: 49 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@types/react-dom": "^18.3.1",
3535
"@vitejs/plugin-react": "^4.3.4",
3636
"autoprefixer": "^10.4.20",
37+
"daisyui": "^4.12.14",
3738
"eslint": "^9.15.0",
3839
"eslint-config-prettier": "^9.1.0",
3940
"eslint-plugin-prettier": "^5.2.1",

‎web/src/hooks/use-mobile.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎web/src/index.css‎

Lines changed: 3 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,13 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
45
@layer base {
56
:root {
67
--background: 0 0% 3.9%;
78
--foreground: 0 0% 100%;
8-
--card: 0 0% 100%;
9-
--card-foreground: 0 0% 3.9%;
10-
--popover: 0 0% 100%;
11-
--popover-foreground: 0 0% 3.9%;
12-
--primary: 0 0% 9%;
13-
--primary-foreground: 0 0% 98%;
14-
--secondary: 0 0% 96.1%;
15-
--secondary-foreground: 0 0% 9%;
16-
--muted: 0 0% 96.1%;
17-
--muted-foreground: 0 0% 45.1%;
18-
--accent: 0 0% 96.1%;
19-
--accent-foreground: 0 0% 9%;
20-
--destructive: 0 84.2% 60.2%;
21-
--destructive-foreground: 0 0% 98%;
22-
--border: 0 0% 89.8%;
23-
--input: 0 0% 89.8%;
24-
--ring: 0 0% 3.9%;
25-
--chart-1: 12 76% 61%;
26-
--chart-2: 173 58% 39%;
27-
--chart-3: 197 37% 24%;
28-
--chart-4: 43 74% 66%;
29-
--chart-5: 27 87% 67%;
30-
--radius: 0.5rem
31-
;
32-
--sidebar-background: 0 0% 98%;
33-
--sidebar-foreground: 240 5.3% 26.1%;
34-
--sidebar-primary: 240 5.9% 10%;
35-
--sidebar-primary-foreground: 0 0% 98%;
36-
--sidebar-accent: 240 4.8% 95.9%;
37-
--sidebar-accent-foreground: 240 5.9% 10%;
38-
--sidebar-border: 220 13% 91%;
39-
--sidebar-ring: 217.2 91.2% 59.8%}
40-
.dark {
41-
--background: 0 0% 3.9%;
42-
--foreground: 0 0% 98%;
43-
--card: 0 0% 3.9%;
44-
--card-foreground: 0 0% 98%;
45-
--popover: 0 0% 3.9%;
46-
--popover-foreground: 0 0% 98%;
47-
--primary: 0 0% 98%;
48-
--primary-foreground: 0 0% 9%;
49-
--secondary: 0 0% 14.9%;
50-
--secondary-foreground: 0 0% 98%;
51-
--muted: 0 0% 14.9%;
52-
--muted-foreground: 0 0% 63.9%;
53-
--accent: 0 0% 14.9%;
54-
--accent-foreground: 0 0% 98%;
55-
--destructive: 0 62.8% 30.6%;
56-
--destructive-foreground: 0 0% 98%;
57-
--border: 0 0% 14.9%;
58-
--input: 0 0% 14.9%;
59-
--ring: 0 0% 83.1%;
60-
--chart-1: 220 70% 50%;
61-
--chart-2: 160 60% 45%;
62-
--chart-3: 30 80% 55%;
63-
--chart-4: 280 65% 60%;
64-
--chart-5: 340 75% 55%
65-
;
66-
--sidebar-background: 240 5.9% 10%;
67-
--sidebar-foreground: 240 4.8% 95.9%;
68-
--sidebar-primary: 224.3 76.3% 48%;
69-
--sidebar-primary-foreground: 0 0% 100%;
70-
--sidebar-accent: 240 3.7% 15.9%;
71-
--sidebar-accent-foreground: 240 4.8% 95.9%;
72-
--sidebar-border: 240 3.7% 15.9%;
73-
--sidebar-ring: 217.2 91.2% 59.8%}
74-
}
75-
@layer base {
9+
}
10+
7611
@font-face {
7712
font-family: "figtree";
7813
src: url("/fonts/Figtree-VariableFont_wght.ttf");
@@ -81,18 +16,7 @@
8116
font-style: "normal";
8217
}
8318

84-
* {
85-
@apply border-border;
86-
}
8719
body {
8820
@apply bg-background text-foreground font-figtree;
8921
}
9022
}
91-
@layer base {
92-
* {
93-
@apply border-border;
94-
}
95-
body {
96-
@apply bg-background text-foreground;
97-
}
98-
}

‎web/src/pages/terraform-template/ARGOCD/argocd.tsx‎

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,128 @@
1-
import { FC } from 'react';
1+
import { cn } from '@/lib/utils';
2+
import { FC, useState } from 'react';
3+
import { ChevronDown } from 'lucide-react';
24

35
const Argocd: FC = () => {
4-
return <>Argocd</>;
6+
const [dropdown, setDropdown] = useState({
7+
argo_application: false,
8+
sync_policy: false,
9+
});
10+
const [services, setServices] = useState({
11+
auto_prune: false,
12+
self_heal: false,
13+
argocd_repository: false,
14+
application_depends_repository: false,
15+
});
16+
17+
const handleDropdown = (dropdownItem: keyof typeof dropdown) => {
18+
setDropdown((prev) => ({
19+
...prev,
20+
[dropdownItem]: !prev[dropdownItem],
21+
}));
22+
};
23+
24+
const handleServices = (serviceItem: keyof typeof services) => {
25+
setServices((prev) => ({
26+
...prev,
27+
[serviceItem]: !prev[serviceItem],
28+
}));
29+
};
30+
31+
return (
32+
<div className="w-full max-w-96">
33+
<div className="border border-gray-500 rounded-md">
34+
<div className="divide-y divide-gray-500">
35+
<div className="flex items-center justify-between w-full px-3 py-3">
36+
<p>Argo Application</p>
37+
<input
38+
type="checkbox"
39+
className={cn('toggle border-gray-500 bg-gray-500', {
40+
'bg-orange-base hover:bg-orange-base/70':
41+
dropdown.argo_application,
42+
})}
43+
onChange={() => handleDropdown('argo_application')}
44+
/>
45+
</div>
46+
<div
47+
className={cn(
48+
'max-h-0 w-full divide-y divide-gray-500 overflow-hidden transition-all',
49+
{
50+
'max-h-96': dropdown.argo_application,
51+
},
52+
)}
53+
>
54+
<div
55+
className="flex items-center justify-between py-3 pl-10 pr-3 cursor-pointer"
56+
onClick={() => handleDropdown('sync_policy')}
57+
>
58+
<p>Sync Policy</p>
59+
<ChevronDown
60+
className={cn('transition-all', {
61+
'rotate-180': dropdown.sync_policy,
62+
})}
63+
/>
64+
</div>
65+
<div
66+
className={cn(
67+
'max-h-0 w-full divide-y divide-gray-500 overflow-hidden transition-all',
68+
{
69+
'max-h-96': dropdown.sync_policy,
70+
},
71+
)}
72+
>
73+
<div className="flex items-center justify-between py-3 pl-16 pr-3">
74+
<p>Auto Prune</p>
75+
<input
76+
type="checkbox"
77+
className={cn('toggle border-gray-500 bg-gray-500', {
78+
'bg-orange-base hover:bg-orange-base/70':
79+
services.auto_prune,
80+
})}
81+
onChange={() => handleServices('auto_prune')}
82+
/>
83+
</div>
84+
<div className="flex items-center justify-between py-3 pl-16 pr-3">
85+
<p>Self Heal</p>
86+
<input
87+
type="checkbox"
88+
className={cn('toggle border-gray-500 bg-gray-500', {
89+
'bg-orange-base hover:bg-orange-base/70':
90+
services.self_heal,
91+
})}
92+
onChange={() => handleServices('self_heal')}
93+
/>
94+
</div>
95+
</div>
96+
</div>
97+
<div className="flex items-center justify-between w-full px-3 py-3">
98+
<p>Argocd Repository</p>
99+
<input
100+
type="checkbox"
101+
className={cn('toggle border-gray-500 bg-gray-500', {
102+
'bg-orange-base hover:bg-orange-base/70':
103+
services.argocd_repository,
104+
})}
105+
onChange={() => handleServices('argocd_repository')}
106+
/>
107+
</div>
108+
<div className="flex items-center justify-between w-full px-3 py-3">
109+
<p>Application Depends Repository</p>
110+
<input
111+
type="checkbox"
112+
className={cn('toggle border-gray-500 bg-gray-500', {
113+
'bg-orange-base hover:bg-orange-base/70':
114+
services.application_depends_repository,
115+
})}
116+
onChange={() => handleServices('application_depends_repository')}
117+
/>
118+
</div>
119+
</div>
120+
</div>
121+
<button className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70">
122+
Submit
123+
</button>
124+
</div>
125+
);
5126
};
6127

7128
export default Argocd;

0 commit comments

Comments
 (0)