Skip to content

Commit c29ca06

Browse files
RikthepixelRikthepixel
committed
Setup tailwind theme and add button controlls
1 parent 3d4e0ba commit c29ca06

File tree

12 files changed

+173
-15
lines changed

12 files changed

+173
-15
lines changed

‎.vscode/settings.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"tailwindCSS.experimental.classRegex": [
3+
[
4+
"cva\\(([^)]*)\\)",
5+
"[\"'`]([^\"'`]*).*?[\"'`]"
6+
]
7+
]
8+
}

‎package-lock.json

+34
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"@types/node": "18.15.0",
1212
"@types/react": "18.0.28",
1313
"@types/react-dom": "18.0.11",
14+
"class-variance-authority": "^0.4.0",
1415
"next": "13.2.4",
1516
"react": "18.2.0",
1617
"react-dom": "18.2.0",
18+
"tailwind-merge": "^1.10.0",
1719
"typescript": "4.9.5"
1820
},
1921
"devDependencies": {
@@ -22,4 +24,4 @@
2224
"postcss": "^8.4.21",
2325
"tailwindcss": "^3.2.7"
2426
}
25-
}
27+
}

‎src/components/controls/Button.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { HTMLAttributes, useMemo } from "react";;
2+
import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
3+
import { twMerge } from "tailwind-merge";
4+
5+
import { RequiredKeys } from "@/types/utility";
6+
7+
export const style = cva("transition-color shadow-sm px-3 py-2 rounded-md", {
8+
variants: {
9+
color: {
10+
secondary: "bg-secondary hover:bg-secondary-dark text-secondary-contrast"
11+
}
12+
}
13+
});
14+
15+
export type VariantProps = GetVariantProps<typeof style>;
16+
17+
type ButtonProps = {
18+
19+
} & RequiredKeys<VariantProps, "color">
20+
& HTMLAttributes<HTMLButtonElement>;
21+
22+
const Button = ({ className, color, ...props }: ButtonProps) => {
23+
24+
const computedClassName = useMemo(
25+
() => twMerge(style({ color }), className),
26+
[className, color]
27+
);
28+
29+
return (
30+
<button className={computedClassName} {...props} />
31+
);
32+
};
33+
34+
export default Button;

‎src/components/controls/LinkButton.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useMemo } from "react";
2+
import Link, { LinkProps as InternalLinkProps } from "next/link";
3+
import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
4+
import { twMerge } from "tailwind-merge";
5+
6+
import { RequiredKeys } from "@/types/utility";
7+
8+
import { style as buttonStyle } from "./Button";
9+
10+
export const style = buttonStyle;
11+
12+
export type VariantProps = GetVariantProps<typeof style>;
13+
14+
type LinkButtonProps = {
15+
16+
} & RequiredKeys<VariantProps, "color">
17+
& Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps>
18+
& InternalLinkProps
19+
& React.RefAttributes<HTMLAnchorElement>;
20+
21+
const LinkButton = ({ className, color, ...props }: LinkButtonProps) => {
22+
23+
const computedClassName = useMemo(
24+
() => twMerge(style({ color }), className),
25+
[className, color]
26+
);
27+
28+
return (
29+
<Link className={computedClassName} {...props} />
30+
);
31+
};
32+
33+
export default LinkButton;

‎src/pages/_app.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1+
import Head from "next/head";
12
import type { AppProps } from 'next/app';
2-
import '@/styles/main.css';
3-
4-
53
import { Open_Sans } from 'next/font/google';
64

7-
const openSans = Open_Sans({ subsets: ['latin'], variable: "--font-open-sans" });
5+
import '@/styles/main.css';
6+
7+
const openSans = Open_Sans({
8+
subsets: ['latin'],
9+
variable: "--font-open-sans"
10+
});
811

912
export default function App({ Component, pageProps }: AppProps) {
1013
return (
11-
<div className="flex flex-col items-center">
12-
<Component className={openSans.variable} {...pageProps} />
13-
</div>
14+
<>
15+
<Head>
16+
<title>Commit Rocket</title>
17+
</Head>
18+
<div className="flex flex-col items-center">
19+
<Component className={openSans.variable} {...pageProps} />
20+
</div>
21+
</>
1422
);
1523
}

‎src/pages/_document.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export default function Document() {
44
return (
55
<Html lang="en">
66
<Head>
7-
<title>Commit Rocket</title>
87
<meta name="description" content="Commit Rocket, next-gen git client" />
98
<link rel="icon" href="/favicon.ico" />
109
</Head>

‎src/pages/about.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Page } from "@/types/Page";
1+
import { Page } from "@/types/page";
22
import Head from "next/head";
33

44
const AboutPage: Page = ({ }) => {

‎src/pages/index.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import Head from "next/head";
22

3-
import { Page } from "@/types/Page";
3+
import { Page } from "@/types/page";
4+
import LinkButton from "@/components/controls/LinkButton";
45

56
const FrontPage: Page = ({ className }) => {
67
return (
78
<>
89
<Head>
910
<title>Commit Rocket</title>
1011
</Head>
11-
classNamez
12+
<LinkButton href="/about" color="secondary">
13+
Keep me up to date
14+
</LinkButton>
1215
</>
1316
);
1417
};

‎src/styles/main.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@ html,
66
body,
77
#__next,
88
#__next>div {
9-
height: 100%
9+
height: 100%
10+
}
11+
12+
html {
13+
@apply bg-fill
1014
}

‎src/types/utility.d.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export type RequiredKeys<
2+
T extends object,
3+
K extends keyof T = keyof T
4+
> = Omit<T, K> & Required<Pick<T, K>>;
5+
6+
export type OptionalKeys<
7+
T extends object,
8+
K extends keyof T = keyof T
9+
> = Omit<T, K> & Partial<Pick<T, K>>;
10+
11+
export type Prefix<TKey, TPrefix extends string> = TKey extends string
12+
? `${TPrefix}${Capitalize<TKey>}`
13+
: TKey extends Object
14+
? { [K in keyof TKey as `${TPrefix}${Capitalize<K>}`]: TKey[K]; }
15+
: never;

‎tailwind.config.js

+20-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { fontFamily } = require('tailwindcss/defaultTheme')
1+
const { fontFamily } = require('tailwindcss/defaultTheme');
22

33

44
/** @type {import('tailwindcss').Config} */
@@ -9,8 +9,26 @@ module.exports = {
99
],
1010
theme: {
1111
extend: {
12+
colors: {
13+
primary: {
14+
DEFAULT: "#FF5C00",
15+
light: "#FF792E",
16+
dark: "#DB5103",
17+
contrast: "#FFF"
18+
},
19+
secondary: {
20+
DEFAULT: "#E83227",
21+
light: "#F44338",
22+
dark: "#B01D14",
23+
contrast: "#FFF"
24+
},
25+
fill: {
26+
DEFAULT: "#FFDFC1",
27+
contrast: "#282828"
28+
}
29+
},
1230
fontFamily: {
13-
openSans: [ "var(--font-open-sans)", ...fontFamily.sans]
31+
openSans: ["var(--font-open-sans)", ...fontFamily.sans]
1432
}
1533
},
1634
},

0 commit comments

Comments
 (0)