Skip to content

Commit 09acfd1

Browse files
hoangdevnullhoangdevnull
committed
feat: update remix apps
1 parent df34a48 commit 09acfd1

5 files changed

Lines changed: 230 additions & 41 deletions

File tree

‎apps/remix-app/app/components/layout.tsx‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import { PropsWithChildren } from 'react';
2+
import { Link } from '@remix-run/react';
3+
import {
4+
Award01Icon,
5+
CoinsStacked03Icon,
6+
CurrencyDollarCircleIcon,
7+
Diamond01Icon,
8+
GraduationHat01Icon,
9+
Lightbulb02Icon,
10+
UserRight01Icon,
11+
Users01Icon,
12+
UsersPlusIcon,
13+
UserUp02Icon,
14+
} from '@var-meta/icons';
15+
import { CalendarIcon, HStack, Sidebar, Layout as VarLayout } from '@var-meta/ui';
16+
17+
const Logo = () => (
18+
<svg width={40} height={40} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
19+
<g filter="url(#a)">
20+
<rect width={40} height={40} rx={20} fill="#312DCA" />
21+
<path
22+
d="m22.139 25.065-2.277-3.956a.31.31 0 0 0-.536 0l-2.284 3.956a.31.31 0 0 0 .268.464h4.564a.31.31 0 0 0 .265-.464"
23+
fill="#fff"
24+
/>
25+
<path
26+
d="m21.89 15.007.004-.007h-.658c-.11 0-.214.06-.268.153l-1.037 1.797a.31.31 0 0 1-.536 0l-1.033-1.796a.3.3 0 0 0-.268-.154l-11.784.007a.31.31 0 0 0-.268.464l5.715 9.915a.3.3 0 0 0 .268.154h3.614c.11 0 .214-.06.268-.154l3.488-6.048a.309.309 0 0 1 .537 0l3.488 6.048a.3.3 0 0 0 .268.154h3.614c.11 0 .214-.06.268-.154l5.722-9.922a.31.31 0 0 0-.268-.464z"
27+
fill="#fff"
28+
/>
29+
</g>
30+
<defs>
31+
<filter id="a" x={0} y={-4} width={40} height={44} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
32+
<feFlood floodOpacity={0} result="BackgroundImageFix" />
33+
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
34+
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
35+
<feOffset dy={-4} />
36+
<feGaussianBlur stdDeviation={4} />
37+
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
38+
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.64 0" />
39+
<feBlend in2="shape" result="effect1_innerShadow_31_6926" />
40+
</filter>
41+
</defs>
42+
</svg>
43+
);
44+
45+
const links = [
46+
{
47+
title: 'GENERAL',
48+
routes: [
49+
{
50+
icon: <Users01Icon className="h-5 w-5" />,
51+
label: 'Staff List',
52+
value: 'Staff List',
53+
href: '/',
54+
},
55+
{
56+
icon: <UserRight01Icon className="h-5 w-5" />,
57+
label: 'Request',
58+
value: 'Request',
59+
dropdowns: [
60+
{
61+
label: 'Work from home',
62+
value: 'Work from home',
63+
href: '/',
64+
},
65+
{
66+
label: 'Day off',
67+
value: 'Day off',
68+
href: '/',
69+
},
70+
{
71+
label: 'CI/CO',
72+
value: 'CI/CO',
73+
href: '/',
74+
},
75+
{
76+
label: 'Overtime',
77+
value: 'Overtime',
78+
href: '/',
79+
},
80+
],
81+
},
82+
{
83+
icon: <Award01Icon className="h-5 w-5" />,
84+
label: 'Ranking Chart',
85+
value: 'Ranking Chart',
86+
href: '/',
87+
},
88+
],
89+
},
90+
91+
{
92+
title: 'SALARY',
93+
routes: [
94+
{
95+
icon: <CalendarIcon className="h-5 w-5" />,
96+
label: 'Time Keeping',
97+
value: 'Time Keeping',
98+
href: '/',
99+
},
100+
{
101+
icon: <CurrencyDollarCircleIcon className="h-5 w-5" />,
102+
label: 'Payroll',
103+
value: 'Payroll',
104+
href: '/',
105+
},
106+
{
107+
icon: <UserUp02Icon className="h-5 w-5" />,
108+
label: 'Check Point',
109+
value: 'Check Point',
110+
href: '/',
111+
},
112+
],
113+
},
114+
115+
{
116+
title: 'MANAGEMENT',
117+
routes: [
118+
{
119+
icon: <CoinsStacked03Icon className="h-5 w-5" />,
120+
label: 'Resource Management',
121+
value: 'Resource Management',
122+
href: '/',
123+
},
124+
{
125+
icon: <Lightbulb02Icon className="h-5 w-5" />,
126+
label: 'Initiative Management',
127+
value: 'Initiative Management',
128+
href: '/',
129+
},
130+
{
131+
icon: <Diamond01Icon className="h-5 w-5" />,
132+
label: 'Asset Management',
133+
value: 'Asset Management',
134+
href: '/',
135+
},
136+
{
137+
icon: <UsersPlusIcon className="h-5 w-5" />,
138+
label: 'Recruitment Management',
139+
value: 'Recruitment Management',
140+
href: '/',
141+
},
142+
{
143+
icon: <GraduationHat01Icon className="h-5 w-5" />,
144+
label: 'Skills Management',
145+
value: 'Skills Management',
146+
href: '/',
147+
},
148+
],
149+
},
150+
];
151+
152+
const Layout = ({ children }: PropsWithChildren) => {
153+
return (
154+
<div className="bg-background border-border relative min-h-[80vh] border">
155+
<VarLayout>
156+
<Sidebar.Overlay />
157+
<Sidebar>
158+
<Sidebar.Head>
159+
<Sidebar.Head.Toggle />
160+
161+
<Sidebar.Head.Logo>
162+
<Logo />
163+
</Sidebar.Head.Logo>
164+
<Sidebar.Head.Title>Excellent in Every Block</Sidebar.Head.Title>
165+
</Sidebar.Head>
166+
167+
<Sidebar.Body>
168+
{links.map((link) => (
169+
<Sidebar.Body.Section key={link.title}>
170+
<Sidebar.Body.Title>{link.title}</Sidebar.Body.Title>
171+
<Sidebar.Body.List>
172+
{link.routes.map((item) => {
173+
if (item?.dropdowns) {
174+
return (
175+
<Sidebar.Body.List.Dropdown key={item.label} icon={item.icon} label={item.label}>
176+
{item.dropdowns.map((child) => (
177+
<Link to={child.href} key={child.value}>
178+
<Sidebar.Body.List.Item
179+
as="div"
180+
value={child.value}
181+
key={child.value}
182+
label={child.label}
183+
/>
184+
</Link>
185+
))}
186+
</Sidebar.Body.List.Dropdown>
187+
);
188+
}
189+
190+
return (
191+
<Link to={item.href} key={item.value}>
192+
<Sidebar.Body.List.Item
193+
as="div"
194+
value={item.value}
195+
key={item.value}
196+
icon={item.icon}
197+
label={item.label}
198+
/>
199+
</Link>
200+
);
201+
})}
202+
</Sidebar.Body.List>
203+
</Sidebar.Body.Section>
204+
))}
205+
</Sidebar.Body>
206+
207+
<Sidebar.Footer>Footer</Sidebar.Footer>
208+
</Sidebar>
209+
210+
<VarLayout.Content>
211+
<HStack className="w-full p-4" pos="apart">
212+
<header>Header application</header>
213+
214+
<VarLayout.BurgerMenu />
215+
</HStack>
216+
217+
<main className="w-full p-4">{children}</main>
218+
</VarLayout.Content>
219+
</VarLayout>
220+
</div>
221+
);
222+
};
223+
224+
export default Layout;

‎apps/remix-app/app/root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import './tailwind.css';
44

55
export function Layout({ children }: { children: React.ReactNode }) {
66
return (
7-
<html lang="en">
7+
<html className="light" lang="en">
88
<head>
99
<meta charSet="utf-8" />
1010
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎apps/remix-app/app/routes/_index.tsx‎

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,11 @@
11
import type { MetaFunction } from '@remix-run/node';
2-
import { Button } from '@var-meta/ui';
2+
3+
import Layout from '../components/layout';
34

45
export const meta: MetaFunction = () => {
56
return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
67
};
78

89
export default function Index() {
9-
return (
10-
<div className="p-4 font-sans">
11-
<h1 className="text-3xl">Welcome to Remix</h1>
12-
<ul className="mt-4 list-disc space-y-2 pl-6">
13-
<li>
14-
<a
15-
className="text-blue-700 underline visited:text-purple-900"
16-
target="_blank"
17-
href="https://remix.run/start/quickstart"
18-
rel="noreferrer"
19-
>
20-
5m Quick Start
21-
</a>
22-
</li>
23-
<li>
24-
<a
25-
className="text-blue-700 underline visited:text-purple-900"
26-
target="_blank"
27-
href="https://remix.run/start/tutorial"
28-
rel="noreferrer"
29-
>
30-
30m Tutorial
31-
</a>
32-
</li>
33-
<li>
34-
<a
35-
className="text-blue-700 underline visited:text-purple-900"
36-
target="_blank"
37-
href="https://remix.run/docs"
38-
rel="noreferrer"
39-
>
40-
Remix Docs
41-
</a>
42-
</li>
43-
</ul>
44-
<Button>ALO</Button>
45-
</div>
46-
);
10+
return <Layout>Hello world</Layout>;
4711
}

‎apps/remix-app/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { withTV } from 'tailwind-variants/transformer';
33
import type { Config } from 'tailwindcss';
44

55
const config = {
6+
darkMode: 'class',
67
content: ['./app/**/*.{js,jsx,ts,tsx}', './node_modules/@var-meta/ui/**/*.{js,ts,jsx,tsx}'],
78
theme: {
89
extend: {},

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)