Skip to content

Commit 787a114

Browse files
CodeDoctorDETheBasicBit
CodeDoctorDE
and
TheBasicBit
committed
Finish building website
Co-authored-by: TheBasicBit <[email protected]>
1 parent 2dbb679 commit 787a114

24 files changed

+510
-494
lines changed

‎components/Anchor.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from '@emotion/styled'
2+
import { primary, text } from './variables';
3+
4+
type AnchorProps = {
5+
variant?: "primary" | "secondary";
6+
size?: "small" | "normal" | "large";
7+
};
8+
9+
10+
const Anchor = styled.a<AnchorProps>`
11+
padding: 0.5rem 4rem;
12+
border-radius: 0.8rem;
13+
border: 0;
14+
cursor: pointer;
15+
font-weight: 500;
16+
font-size: 1.5rem;
17+
margin: 0.5rem;
18+
text-decoration: none;
19+
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
20+
${({ variant }) => {
21+
switch (variant) {
22+
case "secondary":
23+
return `
24+
color: ${primary};
25+
background: transparent;
26+
border: 4px solid ${primary};
27+
&:hover {
28+
background: ${primary};
29+
color: ${text};
30+
}
31+
`;
32+
default:
33+
return `
34+
color: ${text};
35+
background: ${primary};
36+
border: 4px solid ${primary};
37+
&:hover {
38+
background: ${text};
39+
color: ${primary};
40+
}
41+
`;
42+
}
43+
}}
44+
${({ size }) => {
45+
switch (size) {
46+
case "small":
47+
return `
48+
padding: 0.5rem 2rem;
49+
font-size: 1rem;
50+
border-width: 2px;
51+
`;
52+
case "large":
53+
return `
54+
padding: 0.5rem 6rem;
55+
font-size: 2rem;
56+
border-width: 6px;
57+
`;
58+
}
59+
}}
60+
`;
61+
62+
export default Anchor;

‎components/Button.tsx

+59-34
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,62 @@
1-
import React, { PropsWithChildren } from "react";
2-
import classes from "../styles/Button.module.scss";
1+
import styled from '@emotion/styled'
2+
import { primary, text } from './variables';
33

4-
type ButtonProps = PropsWithChildren<
5-
React.HTMLAttributes<HTMLButtonElement> & {
6-
variant?: "primary" | "secondary";
7-
size?: "small" | "normal" | "large";
8-
}
9-
>;
4+
type ButtonProps = {
5+
variant?: "primary" | "secondary";
6+
size?: "small" | "normal" | "large";
7+
};
108

11-
export default function Button({
12-
variant,
13-
className,
14-
size,
15-
...props
16-
}: ButtonProps) {
17-
var currentClass = className ?? "";
18-
currentClass += " " + classes.btn;
19-
switch (variant) {
20-
case "secondary":
21-
currentClass += " " + classes.btnSecondary;
22-
break;
23-
default:
24-
currentClass += " " + classes.btnPrimary;
25-
break;
26-
}
27-
switch (size) {
28-
case "small":
29-
currentClass += " " + classes.btnSmall;
30-
break;
31-
case "large":
32-
currentClass += " " + classes.btnLarge;
33-
break;
34-
}
359

36-
return <button className={currentClass} {...props} />;
37-
}
10+
const Button = styled.button<ButtonProps>`
11+
padding: 0.5rem 4rem;
12+
border-radius: 0.8rem;
13+
border: 0;
14+
cursor: pointer;
15+
font-weight: 500;
16+
font-size: 1.5rem;
17+
margin: 0.5rem;
18+
text-decoration: none;
19+
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
20+
${({ variant }) => {
21+
switch (variant) {
22+
case "secondary":
23+
return `
24+
color: ${primary};
25+
background: transparent;
26+
border: 4px solid ${primary};
27+
&:hover {
28+
background: ${primary};
29+
color: ${text};
30+
}
31+
`;
32+
default:
33+
return `
34+
color: ${text};
35+
background: ${primary};
36+
border: 4px solid ${primary};
37+
&:hover {
38+
background: ${text};
39+
color: ${primary};
40+
}
41+
`;
42+
}
43+
}}
44+
${({ size }) => {
45+
switch (size) {
46+
case "small":
47+
return `
48+
padding: 0.5rem 2rem;
49+
font-size: 1rem;
50+
border-width: 2px;
51+
`;
52+
case "large":
53+
return `
54+
padding: 0.5rem 6rem;
55+
font-size: 2rem;
56+
border-width: 6px;
57+
`;
58+
}
59+
}}
60+
`;
61+
62+
export default Button;

‎components/Icon.tsx

+39-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,44 @@
1+
import styled from "@emotion/styled";
12
import React, { PropsWithChildren } from "react";
23
import classes from "../styles/Icon.module.scss";
34
import variables from "../styles/variables.module.scss";
5+
import { primary, text } from "./variables";
46

5-
type IconProps = PropsWithChildren<
6-
React.HTMLAttributes<HTMLSpanElement> & {
7-
size?: number;
8-
color?: "primary" | "text";
9-
}
10-
>;
7+
type IconProps = {
8+
size?: number;
9+
color?: "primary" | "text";
10+
};
1111

12-
export default function Icon({ className, children, ...props }: IconProps) {
13-
return (
14-
<span
15-
className={`material-symbols-outlined ${className ?? ""}}`}
16-
{...props}
17-
>
18-
<style jsx>
19-
{`
20-
span {
21-
font-size: ${props.size ?? 24}px;
22-
user-select: none;
23-
}
24-
span:hover {
25-
cursor: pointer;
26-
color: green;
27-
}
28-
`}
29-
</style>
30-
{children}
31-
</span>
32-
);
33-
}
12+
const Icon = styled.span<IconProps>`
13+
font-family: "Material Symbols Outlined";
14+
font-weight: normal;
15+
font-style: normal;
16+
font-size: 24px;
17+
line-height: 1;
18+
letter-spacing: normal;
19+
text-transform: none;
20+
display: inline-block;
21+
white-space: nowrap;
22+
word-wrap: normal;
23+
direction: ltr;
24+
-webkit-font-smoothing: antialiased;
25+
-moz-osx-font-smoothing: grayscale;
26+
text-rendering: optimizeLegibility;
27+
font-feature-settings: "liga";
28+
user-select: none;
29+
${({ size }) => {
30+
if (size) {
31+
return `font-size: ${size}px;`;
32+
}
33+
}}
34+
color: ${({ color }) => {
35+
switch (color) {
36+
case "primary":
37+
return primary;
38+
case "text":
39+
return text;
40+
}
41+
}};
42+
`;
43+
44+
export default Icon;

‎components/Link.tsx

-32
This file was deleted.

‎components/Navbar.tsx

+50-17
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1+
import { css } from "@emotion/react";
12
import Link from "next/link";
23
import { useRouter } from "next/router";
34
import React, {
45
PropsWithChildren,
5-
ReactElement,
6-
ReactFragment,
7-
ReactNode,
86
} from "react";
9-
import classes from "../styles/Navbar.module.scss";
107
import Icon from "./Icon";
8+
import { mobileBreakpoint, panel, primary, text } from "./variables";
119

1210
type NavbarProps = PropsWithChildren<
1311
React.HTMLAttributes<HTMLDivElement> & {
@@ -27,28 +25,63 @@ export default function Navbar({
2725
const current = router.pathname;
2826
const [open, setOpen] = React.useState(false);
2927
return (
30-
<div className={classes.navbar} {...props}>
31-
<div className={classes.navbarHeader}>
32-
<Icon className={classes.navbarMenu} onClick={() => setOpen(!open)}>
28+
<div css={css`
29+
background: ${panel};
30+
display: flex;
31+
width: 100%;
32+
justify-content: space-between;
33+
@media only screen and (max-width: ${mobileBreakpoint}) {
34+
flex-direction: column;
35+
}
36+
`} {...props}>
37+
<div css={css`
38+
display: flex;
39+
align-items: center;
40+
gap: 1rem;
41+
padding: 1rem;
42+
`}>
43+
<Icon css={css`
44+
display: none;
45+
@media only screen and (max-width: ${mobileBreakpoint}) {
46+
display: inherit;
47+
}
48+
`} onClick={() => setOpen(!open)}>
3349
menu
3450
</Icon>
35-
<div className={classes.navbarTitle}>{header}</div>
51+
<div css={css`
52+
display: flex;
53+
align-items: center;
54+
gap: 0.5rem;
55+
font-size: 1.5rem;
56+
font-weight: 600;
57+
`}>{header}</div>
3658
</div>
3759
<ul
38-
className={
39-
classes.navbarItems + " " + (open ? classes.navbarItemsOpen : "")
40-
}
60+
css={css`
61+
display: flex;
62+
align-items: center;
63+
margin-right: 2rem;
64+
list-style-type: none;
65+
gap: 2rem;
66+
@media only screen and (max-width: ${mobileBreakpoint}) {
67+
flex-direction: column;
68+
display: ${open ? "flex" : "none"};
69+
}
70+
`}
4171
>
4272
{items.map((item) => (
4373
<li key={item.name}>
4474
<Link href={item.href} passHref>
45-
<a
46-
className={
47-
classes.navbarLink +
48-
" " +
49-
(current === item.href ? classes.navbarCurrentLink : "")
75+
<a css={css`
76+
color: ${(current === item.href) ? primary : text};
77+
text-decoration: none;
78+
font-weight: 600;
79+
padding-bottom: ${(current === item.href) ? '0.2rem' : '0'};
80+
border-bottom: ${(current === item.href) ? `0.2rem solid ${primary}` : "none"};
81+
&:hover {
82+
border-bottom: 0.2rem solid ${text};
5083
}
51-
>
84+
`}>
5285
{item.name}
5386
</a>
5487
</Link>

‎components/NewButton.tsx

-35
This file was deleted.

0 commit comments

Comments
 (0)