Skip to content

Commit 3f5ebef

Browse files
AugustinMauroyAugustinMauroy
committed
some fixes
1 parent 4ac7337 commit 3f5ebef

File tree

8 files changed

+142
-106
lines changed

8 files changed

+142
-106
lines changed

‎components/Common/Button/Link/index.tsx‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,84 @@
11
import Link from 'next/link';
22
import classNames from 'classnames';
3-
import styles from '../index.module.css';
43
import type { FC, ComponentProps } from 'react';
54

65
type ButtonLinkProps = ComponentProps<typeof Link> & {
76
kind?: 'primary' | 'secondary' | 'special';
87
};
98

9+
const buttonBaseClasses = `
10+
rounded-sm
11+
inline-flex
12+
items-center
13+
justify-center
14+
gap-2
15+
px-4
16+
py-2
17+
transition
18+
duration-300
19+
ease-in-out
20+
focus:outline-none
21+
has-[svg]:*:size-5
22+
`;
23+
24+
const primaryClasses = `
25+
border-2
26+
border-solid
27+
border-transparent
28+
bg-green-500
29+
text-white
30+
dark:bg-green-400
31+
dark:text-gray-900
32+
hover:border-gray-600
33+
hover:bg-transparent
34+
hover:text-gray-600
35+
hover:dark:text-gray-300
36+
hover:dark:border-gray-300
37+
`;
38+
39+
const secondaryClasses = `
40+
border-2
41+
border-solid
42+
border-transparent
43+
bg-gray-600
44+
text-white
45+
dark:bg-gray-300
46+
dark:text-gray-900
47+
hover:border-gray-600
48+
hover:bg-transparent
49+
hover:text-gray-600
50+
hover:dark:text-gray-300
51+
hover:dark:border-gray-300
52+
`;
53+
54+
const specialClasses = `
55+
border-2
56+
border-solid
57+
border-gray-600
58+
bg-transparent
59+
text-gray-600
60+
dark:text-gray-300
61+
dark:border-gray-300
62+
hover:bg-green-500
63+
hover:text-white
64+
hover:dark:bg-green-400
65+
hover:dark:text-gray-900
66+
`;
67+
68+
const kindClasses = {
69+
primary: primaryClasses,
70+
secondary: secondaryClasses,
71+
special: specialClasses,
72+
};
73+
1074
export const ButtonLink: FC<ButtonLinkProps> = ({
1175
children,
1276
className,
1377
kind = 'primary',
1478
...props
1579
}) => (
1680
<Link
17-
className={classNames(className, styles.button, styles[kind])}
81+
className={classNames(buttonBaseClasses, kindClasses[kind], className)}
1882
{...props}
1983
>
2084
{children}

‎components/Common/Button/index.module.css‎

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

‎components/Common/Button/index.tsx‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,75 @@
11
import classNames from 'classnames';
2-
import styles from './index.module.css';
32
import type { FC, ButtonHTMLAttributes } from 'react';
43

54
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
65
kind?: 'primary' | 'secondary' | 'special';
76
};
87

8+
const buttonBaseClasses = `
9+
rounded-sm
10+
inline-flex
11+
items-center
12+
justify-center
13+
gap-2
14+
px-4
15+
py-2
16+
transition
17+
duration-300
18+
ease-in-out
19+
focus:outline-none
20+
has-[svg]:*:size-5
21+
`;
22+
23+
const primaryClasses = `
24+
border-2
25+
border-solid
26+
border-transparent
27+
bg-green-500
28+
text-white
29+
dark:bg-green-400
30+
dark:text-gray-900
31+
hover:border-gray-600
32+
hover:bg-transparent
33+
hover:text-gray-600
34+
hover:dark:text-gray-300
35+
hover:dark:border-gray-300
36+
`;
37+
38+
const secondaryClasses = `
39+
border-2
40+
border-solid
41+
border-transparent
42+
bg-gray-600
43+
text-white
44+
dark:bg-gray-300
45+
dark:text-gray-900
46+
hover:border-gray-600
47+
hover:bg-transparent
48+
hover:text-gray-600
49+
hover:dark:text-gray-300
50+
hover:dark:border-gray-300
51+
`;
52+
53+
const specialClasses = `
54+
border-2
55+
border-solid
56+
border-gray-600
57+
bg-transparent
58+
text-gray-600
59+
dark:text-gray-300
60+
dark:border-gray-300
61+
hover:bg-green-500
62+
hover:text-white
63+
hover:dark:bg-green-400
64+
hover:dark:text-gray-900
65+
`;
66+
67+
const kindClasses = {
68+
primary: primaryClasses,
69+
secondary: secondaryClasses,
70+
special: specialClasses,
71+
};
72+
973
export const Button: FC<ButtonProps> = ({
1074
children,
1175
disabled,
@@ -14,7 +78,7 @@ export const Button: FC<ButtonProps> = ({
1478
...props
1579
}) => (
1680
<button
17-
className={classNames(className, styles.button, styles[kind])}
81+
className={classNames(buttonBaseClasses, kindClasses[kind], className)}
1882
disabled={disabled}
1983
aria-disabled={disabled}
2084
{...props}

‎components/Landing/LastestArticleSection/index.module.css‎

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

‎components/Landing/LastestArticleSection/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { LastestArticle } from '~/components/Post/LastestArticle/index.tsx';
2-
import styles from './index.module.css';
32
import type { FC } from 'react';
43

54
export const LatestArticleSection: FC = () => (
6-
<section id="lastest-article" className={styles.section}>
7-
<div className={styles.header}>
8-
<h2 className={styles.title}>Lastes Articles</h2>
9-
<p className={styles.p}>
5+
<section
6+
id="lastest-article"
7+
className="bg-green-50 px-10 py-8 dark:bg-green-800"
8+
>
9+
<div className="mb-8 border-gray-600 border-b-2 dark:border-gray-200">
10+
<h2 className="mb-2 font-bold text-3xl dark:text-white">
11+
Lastes Articles
12+
</h2>
13+
<p className="font-semibold text-gray-600 dark:text-gray-200">
1014
Discover the lastest articles about Nodejs-Loaders
1115
</p>
1216
</div>

‎components/Sections/Header/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const NAVIGATION = [
1616
];
1717

1818
export const Header: FC = () => (
19-
<header className="flex h-16 w-full items-center justify-between border-gray-600 border-b-2 bg-gray-50 px-4 text-gray-600 dark:bg-gray-900 dark:text-gray-300">
19+
<header className='flex w-full flex-col flex-wrap items-center justify-between gap-2 border-gray-600 border-b-2 bg-gray-50 px-4 py-2 text-gray-600 sm:flex-row dark:bg-gray-900 dark:text-gray-300'>
2020
<Link
2121
href="/"
2222
className="inline-flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-lg hover:bg-gray-200 hover:dark:bg-gray-800"

‎package-lock.json‎

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

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"devDependencies": {
3131
"@biomejs/biome": "~1.9.4",
3232
"@nodejs-loaders/alias": "1.1.1",
33-
"@nodejs-loaders/css-module": "1.0.1",
3433
"@nodejs-loaders/tsx": "1.0.2",
3534
"@tailwindcss/postcss": "^4.0.8",
3635
"@testing-library/react": "~16.2.0",

0 commit comments

Comments
 (0)