Skip to content

Commit 668e4ae

Browse files
rohithandiquerohithandique
committed
added dummy landing, modifed dashboard
1 parent 7b0d458 commit 668e4ae

17 files changed

Lines changed: 528 additions & 130 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Generic App</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/app/providers/with-mantine.tsx‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,46 @@ import '@mantine/core/styles.css';
99
import '@app/styles/index.css';
1010

1111
const theme = createTheme({
12-
fontFamily:
13-
'Geist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
14-
fontFamilyMonospace: '"Geist Mono", Monaco, Courier, monospace',
12+
fontFamily: 'Geist, sans-serif',
13+
fontFamilyMonospace: '"Geist Mono", monospace',
14+
1515
headings: {
1616
fontFamily: 'Geist, sans-serif',
1717
fontWeight: '600',
1818
},
19+
colors: {
20+
zinc: [
21+
'#fafafa',
22+
'#f4f4f5',
23+
'#e4e4e7',
24+
'#d4d4d8',
25+
'#a1a1aa',
26+
'#71717a',
27+
'#52525b',
28+
'#3f3f46',
29+
'#27272a',
30+
'#18181b',
31+
],
32+
},
33+
34+
primaryColor: 'zinc',
35+
primaryShade: 0,
36+
37+
components: {
38+
Button: {
39+
defaultProps: {
40+
fw: 500,
41+
radius: 'md',
42+
},
43+
},
44+
TextInput: {
45+
defaultProps: {
46+
radius: 'md',
47+
},
48+
},
49+
},
50+
51+
autoContrast: true,
1952
});
2053

2154
export const withMantine = (Component: ComponentType) => {

‎src/app/routes/__root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Header } from '@/widgets/header';
22
import { createRootRoute, Outlet } from '@tanstack/react-router';
3-
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
3+
// import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
44

55
const RootLayout = () => (
66
<>
77
<Header />
88
<Outlet />
9-
<TanStackRouterDevtools />
9+
{/* <TanStackRouterDevtools /> */}
1010
</>
1111
);
1212

‎src/app/styles/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,9 @@
1111
body {
1212
background-color: var(--mantine-color-body);
1313
}
14+
15+
.unstyled-link {
16+
text-decoration: none;
17+
color: inherit;
18+
display: contents; /* Makes the link "invisible" to the layout */
19+
}

‎src/entities/UserCard.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Box, Group, MantineTheme, UnstyledButton, Text } from '@mantine/core';
2+
3+
export function UserCard() {
4+
return (
5+
<UnstyledButton
6+
p="md"
7+
style={(theme: MantineTheme) => ({
8+
display: 'block',
9+
width: '100%',
10+
borderRadius: theme.radius.sm,
11+
})}
12+
>
13+
<Group>
14+
<Box style={{ flex: 1 }}>
15+
<Text size="sm" fw={500}>
16+
Rohit Handique
17+
</Text>
18+
<Text c="dimmed" size="xs">
19+
rohit.handique@gmail.com
20+
</Text>
21+
</Box>
22+
</Group>
23+
</UnstyledButton>
24+
);
25+
}

‎src/features/SignInModal.tsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { useDisclosure } from '@mantine/hooks';
2+
import {
3+
Anchor,
4+
Checkbox,
5+
Paper,
6+
PasswordInput,
7+
Text,
8+
TextInput,
9+
Title,
10+
Box,
11+
rem,
12+
Modal,
13+
Button,
14+
Flex,
15+
Group,
16+
} from '@mantine/core';
17+
import { useNavigate } from '@tanstack/react-router';
18+
19+
export function SignInModal() {
20+
const [opened, { open, close }] = useDisclosure(false);
21+
const navigate = useNavigate();
22+
23+
const modalContentHeight = rem(550);
24+
25+
const mockLogin = () => {
26+
close();
27+
navigate({ to: '/dashboard' });
28+
};
29+
30+
return (
31+
<>
32+
<Modal
33+
opened={opened}
34+
onClose={close}
35+
title="Authentication"
36+
centered
37+
size="xl"
38+
padding={0}
39+
overlayProps={{
40+
backgroundOpacity: 0.55,
41+
blur: 3,
42+
}}
43+
styles={{
44+
content: {
45+
height: modalContentHeight,
46+
padding: 0,
47+
display: 'flex',
48+
borderRadius: rem(8),
49+
overflow: 'hidden',
50+
},
51+
body: {
52+
padding: 0,
53+
display: 'flex',
54+
flexGrow: 1,
55+
},
56+
header: {
57+
display: 'none',
58+
},
59+
}}
60+
>
61+
<Flex direction={{ base: 'column', sm: 'row' }} h="100%" w="100%">
62+
<Paper
63+
p="xl"
64+
radius={0}
65+
style={(theme) => ({
66+
flex: 1,
67+
minWidth: rem(300),
68+
height: '100%',
69+
display: 'flex',
70+
flexDirection: 'column',
71+
justifyContent: 'center',
72+
backgroundColor: theme.colors.dark[7],
73+
})}
74+
>
75+
<Title
76+
order={2}
77+
ta="center"
78+
mb={30}
79+
style={(theme) => ({
80+
fontFamily: `Outfit, ${theme.fontFamily}`,
81+
fontWeight: 600,
82+
color: theme.white,
83+
})}
84+
>
85+
Get Started!
86+
</Title>
87+
88+
<TextInput
89+
label="Email address"
90+
placeholder="hello@gmail.com"
91+
size="md"
92+
radius="md"
93+
required
94+
/>
95+
96+
<PasswordInput
97+
label="Password"
98+
placeholder="Your password"
99+
mt="md"
100+
size="md"
101+
radius="md"
102+
required
103+
/>
104+
105+
<Group justify="space-between" mt="lg">
106+
<Checkbox label="Keep me logged in" size="sm" />
107+
<Anchor component="button" size="sm">
108+
Forgot password?
109+
</Anchor>
110+
</Group>
111+
112+
<Button
113+
variant="filled"
114+
fullWidth
115+
mt="xl"
116+
size="md"
117+
radius="md"
118+
onClick={() => mockLogin()}
119+
>
120+
Login
121+
</Button>
122+
123+
<Text ta="center" mt="md" size="sm">
124+
Don&apos;t have an account?{' '}
125+
<Anchor
126+
href="#"
127+
fw={700}
128+
onClick={(event) => event.preventDefault()}
129+
>
130+
Register
131+
</Anchor>
132+
</Text>
133+
</Paper>
134+
135+
<Box
136+
style={(theme) => ({
137+
flex: 1.5,
138+
backgroundImage:
139+
'url(https://images.unsplash.com/photo-1484242857719-4b9144542727?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80)',
140+
backgroundSize: 'cover',
141+
backgroundPosition: 'center',
142+
height: '100%',
143+
display: theme.breakpoints.sm ? 'block' : 'none',
144+
})}
145+
/>
146+
</Flex>
147+
</Modal>
148+
149+
<Button variant="default" onClick={open}>
150+
Sign In
151+
</Button>
152+
</>
153+
);
154+
}

‎src/pages/landing/ui/Landing.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1+
import { rem, Box } from '@mantine/core';
2+
import { Hero } from './hero';
3+
import { Features } from './features';
4+
import { Footer } from '@/widgets/footer';
5+
16
export function Landing() {
2-
return <div>Landing</div>;
7+
const SIDEBAR_WIDTH = rem(300);
8+
const borderColor =
9+
'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4))';
10+
11+
return (
12+
<Box
13+
component="header"
14+
style={{ position: 'relative', minHeight: '100vh' }}
15+
>
16+
<Box
17+
w={SIDEBAR_WIDTH}
18+
style={{
19+
position: 'absolute',
20+
left: 0,
21+
top: 0,
22+
bottom: 0,
23+
borderRight: `${rem(1)} solid ${borderColor}`,
24+
}}
25+
/>
26+
27+
<Hero />
28+
<Features />
29+
<Box
30+
w={SIDEBAR_WIDTH}
31+
style={{
32+
position: 'absolute',
33+
right: 0,
34+
top: 0,
35+
bottom: 0,
36+
borderLeft: `${rem(1)} solid ${borderColor}`,
37+
}}
38+
/>
39+
<Footer />
40+
</Box>
41+
);
342
}

0 commit comments

Comments
 (0)