Skip to content

Commit 8ec80e1

Browse files
LokripLokrip
committed
feat: add header
1 parent 0f7e1d6 commit 8ec80e1

11 files changed

Lines changed: 161 additions & 144 deletions

File tree

‎src/app/globals.css‎

Lines changed: 8 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "tailwindcss";
2+
13
:root {
24
--white: #FFFFFF;
35
--yellow: #F6BD26;
@@ -48,65 +50,9 @@
4850
--neutral-10: #1a1819;
4951
--neutral-5: #0d0c0c;
5052
--error-100: #FF2134;
51-
}
52-
53-
*,
54-
*::after,
55-
*::before {
56-
margin: 0;
57-
padding: 0;
58-
box-sizing: border-box;
59-
}
60-
61-
62-
li {list-style: none;}
63-
64-
a,
65-
img,
66-
span,
67-
input,
68-
select,
69-
button {display: block;}
70-
71-
72-
a {
73-
color: inherit;
74-
text-decoration: none;
75-
}
76-
77-
input,
78-
button,
79-
select {
80-
background: none;
81-
border: none;
82-
font: inherit;
83-
}
84-
85-
button {cursor: pointer;}
86-
87-
input,
88-
select {
89-
width: 100%;
90-
outline: none;
91-
}
92-
93-
address {font-style: normal;}
94-
95-
select {
96-
appearance: none;
97-
-webkit-appearance: none;
98-
-moz-appearance: none;
99-
}
100-
101-
102-
html {
103-
font-family: 'Kanit', sans-serif;
104-
font-size: 18px;
105-
}
106-
107-
108-
body {
109-
background: var(--primary-100-white-new);
110-
scroll-behavior: smooth;
111-
color: var(--neutral-primary);
112-
}
53+
}
54+
55+
body {
56+
background: var(--primary-90-new);
57+
scroll-behavior: smooth;
58+
}

‎src/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
44
import { Geist, Geist_Mono } from "next/font/google";
55
import "./globals.css";
66
import { theme } from '@/theme';
7+
import { AppHeader } from '@/widgets/app-header/app-header';
78

89
const geistSans = Geist({
910
variable: "--font-geist-sans",
@@ -30,6 +31,7 @@ export default function RootLayout({
3031
<body className={`${geistSans.variable} ${geistMono.variable}`}>
3132
<AppRouterCacheProvider>
3233
<ThemeProvider theme={theme}>
34+
<AppHeader />
3335
{children}
3436
</ThemeProvider>
3537
</AppRouterCacheProvider>

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default async function Home() {
1010
// console.log(courses)
1111

1212
return (
13-
<div className={styles.page}>
13+
<div className="max-w-7xl mx-auto mt-8">
1414
<CreateCourseForm revalidatePagePath="/" />
1515
<CoursesList revalidatePagePath="/" />
1616
</div>

‎src/mui/card/OutlinedCard.tsx‎

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

‎src/shared/ui/dropdown.tsx‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import { useState } from 'react';
1+
import { ReactNode } from 'react';
22
import { styled, alpha } from '@mui/material/styles';
33
import Button from '@mui/material/Button';
44
import Menu, { MenuProps } from '@mui/material/Menu';
5-
import MenuItem from '@mui/material/MenuItem';
6-
import EditIcon from '@mui/icons-material/Edit';
7-
import Divider from '@mui/material/Divider';
8-
import ArchiveIcon from '@mui/icons-material/Archive';
9-
import FileCopyIcon from '@mui/icons-material/FileCopy';
10-
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
115
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
126

137
const StyledMenu = styled((props: MenuProps) => (
@@ -53,16 +47,21 @@ const StyledMenu = styled((props: MenuProps) => (
5347
},
5448
}));
5549

56-
export default function CustomizedMenus() {
57-
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
58-
const open = Boolean(anchorEl);
59-
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
60-
setAnchorEl(event.currentTarget);
61-
};
62-
const handleClose = () => {
63-
setAnchorEl(null);
64-
};
65-
50+
export default function DropDownMenu({
51+
keyboard,
52+
menuList,
53+
open,
54+
handleClick,
55+
handleClose,
56+
anchorEl
57+
}: {
58+
keyboard: ReactNode,
59+
menuList: ReactNode,
60+
open: boolean,
61+
handleClick: (event: React.MouseEvent<HTMLElement>) => void,
62+
handleClose: () => void,
63+
anchorEl: HTMLElement | null;
64+
}) {
6665
return (
6766
<div>
6867
<Button
@@ -75,7 +74,7 @@ export default function CustomizedMenus() {
7574
onClick={handleClick}
7675
endIcon={<KeyboardArrowDownIcon />}
7776
>
78-
Options
77+
{keyboard}
7978
</Button>
8079
<StyledMenu
8180
id="demo-customized-menu"
@@ -86,23 +85,7 @@ export default function CustomizedMenus() {
8685
open={open}
8786
onClose={handleClose}
8887
>
89-
<MenuItem onClick={handleClose} disableRipple>
90-
<EditIcon />
91-
Edit
92-
</MenuItem>
93-
<MenuItem onClick={handleClose} disableRipple>
94-
<FileCopyIcon />
95-
Duplicate
96-
</MenuItem>
97-
<Divider sx={{ my: 0.5 }} />
98-
<MenuItem onClick={handleClose} disableRipple>
99-
<ArchiveIcon />
100-
Archive
101-
</MenuItem>
102-
<MenuItem onClick={handleClose} disableRipple>
103-
<MoreHorizIcon />
104-
More
105-
</MenuItem>
88+
{menuList}
10689
</StyledMenu>
10790
</div>
10891
);

‎src/shared/ui/logo-icon.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { SVGProps } from "react";
2+
3+
export function LogoIcon(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}>{/* Icon from Material Icon Theme by Material Extensions - https://github.com/material-extensions/vscode-material-icon-theme/blob/main/LICENSE */}<path fill="#01579b" d="M12.001 4h7.102l-7.372 23.181a1.14 1.14 0 0 1-1.073.819H5.13A1.166 1.166 0 0 1 4 26.801a1.3 1.3 0 0 1 .06-.385l6.87-21.599A1.14 1.14 0 0 1 12.001 4"></path><path fill="#1976d2" d="M22.32 20H11.06a.537.537 0 0 0-.522.55a.57.57 0 0 0 .166.408l7.236 6.716a1.1 1.1 0 0 0 .775.325h6.376Z"></path><path fill="#29b6f6" d="M21.071 4.816A1.14 1.14 0 0 0 20.001 4h-7.915a1.14 1.14 0 0 1 1.072.815l6.868 21.599a1.22 1.22 0 0 1-.71 1.52a1.1 1.1 0 0 1-.362.064h7.915A1.166 1.166 0 0 0 28 26.8a1.3 1.3 0 0 0-.06-.385L21.072 4.817Z"></path></svg>
6+
)
7+
}

‎src/widgets/app-header/_ui/layout.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ReactNode } from "react";
2+
3+
export function Layout({
4+
logo,
5+
nav,
6+
profile,
7+
actions
8+
}: {
9+
logo?: ReactNode,
10+
nav?: ReactNode,
11+
profile?: ReactNode,
12+
actions?: ReactNode
13+
}) {
14+
return (
15+
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:">
16+
<div className="max-w-7xl mx-auto flex h-14 items-center">
17+
<div className="md:hidden mr-2">
18+
{logo}
19+
{nav}
20+
</div>
21+
22+
<div className="mr-4 hidden md:flex">{logo}</div>
23+
<div className="items-center flex-1 flex">{nav}</div>
24+
<div className="flex flex-1 items-center justify-end space-x-3">
25+
{actions}
26+
{profile}
27+
</div>
28+
</div>
29+
</header>
30+
)
31+
}

‎src/widgets/app-header/_ui/logo.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { LogoIcon } from "@/shared/ui/logo-icon"
2+
import Link from "next/link";
3+
4+
export function Logo() {
5+
return (
6+
<Link className="flex items-center space-x-2" href="/">
7+
<LogoIcon className="h-6 w-6" />
8+
<span className="font-bold inline-block">Micro courses</span>
9+
</Link>
10+
)
11+
}

‎src/widgets/app-header/_ui/main-nav.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from "next/link";
2+
3+
export function MainNav() {
4+
return (
5+
<nav className="flex items-start md:items-center gap-6 text-sm font-medium flex-col md:flex-row">
6+
<Link
7+
className="transition-colors hover:text-foreground/80 text-foreground/60"
8+
href="/map"
9+
>
10+
Карта
11+
</Link>
12+
<Link
13+
className="transition-colors hover:text-foreground/80 text-foreground/60"
14+
href="/learn"
15+
>
16+
Обучение
17+
</Link>
18+
</nav>
19+
)
20+
}

‎src/widgets/app-header/_ui/profile.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use client"
2+
3+
import DropDownMenu from '@/shared/ui/dropdown';
4+
import Avatar from '@mui/material/Avatar';
5+
import MenuItem from '@mui/material/MenuItem';
6+
import EditIcon from '@mui/icons-material/Edit';
7+
import Divider from '@mui/material/Divider';
8+
import ArchiveIcon from '@mui/icons-material/Archive';
9+
import FileCopyIcon from '@mui/icons-material/FileCopy';
10+
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
11+
import { useState } from 'react';
12+
13+
export default function Profile() {
14+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
15+
const open = Boolean(anchorEl);
16+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
17+
setAnchorEl(event.currentTarget);
18+
};
19+
const handleClose = () => {
20+
setAnchorEl(null);
21+
};
22+
23+
return (
24+
<DropDownMenu
25+
keyboard={<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
26+
menuList={[
27+
<MenuItem onClick={handleClose} disableRipple key="edit">
28+
<EditIcon />
29+
Edit
30+
</MenuItem>,
31+
<MenuItem onClick={handleClose} disableRipple key="duplicate">
32+
<FileCopyIcon />
33+
Duplicate
34+
</MenuItem>,
35+
<Divider sx={{ my: 0.5 }} key="divider" />,
36+
<MenuItem onClick={handleClose} disableRipple key="archive">
37+
<ArchiveIcon />
38+
Archive
39+
</MenuItem>,
40+
<MenuItem onClick={handleClose} disableRipple key="more">
41+
<MoreHorizIcon />
42+
More
43+
</MenuItem>
44+
]}
45+
open={open}
46+
handleClose={handleClose}
47+
anchorEl={anchorEl}
48+
handleClick={handleClick}
49+
/>
50+
)
51+
}

0 commit comments

Comments
 (0)