Skip to content
This repository was archived by the owner on Jan 26, 2026. It is now read-only.

Commit 88b0e37

Browse files
dangthang1903dangthang1903
committed
Merge remote-tracking branch 'upstream/main'
2 parents 72981db + d3349b3 commit 88b0e37

File tree

104 files changed

+3984
-2514
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+3984
-2514
lines changed

‎app/components/button.tsx‎

Lines changed: 140 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -6,160 +6,160 @@ import { forwardRef } from "react";
66
import { cn } from "~/utils/cn";
77

88
export const variants = cva(
9-
[
10-
"button inline-flex items-center justify-center rounded-none relative",
11-
"leading-tight font-normal whitespace-nowrap",
12-
"focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50!",
13-
"transition-colors",
14-
],
15-
{
16-
variants: {
17-
variant: {
18-
primary: [
19-
"border px-4 py-3",
20-
"text-(--btn-primary-text)",
21-
"bg-(--btn-primary-bg)",
22-
"border-(--btn-primary-bg)",
23-
],
24-
secondary: [
25-
"border px-4 py-3",
26-
"text-(--btn-secondary-text)",
27-
"bg-(--btn-secondary-bg)",
28-
"border-(--btn-secondary-bg)",
29-
],
30-
outline: [
31-
"border px-4 py-3",
32-
"text-(--btn-outline-text)",
33-
"bg-transparent",
34-
"border-(--btn-outline-border)",
35-
],
36-
decor: [
37-
"bg-transparent border-none p-0",
38-
"text-[--btn-text-decor] inline-flex items-center gap-1 group",
39-
],
40-
custom: [
41-
"border px-4 py-3",
42-
"text-(--btn-text)",
43-
"bg-(--btn-bg)",
44-
"border-(--btn-border)",
45-
"hover:text-(--btn-text-hover)",
46-
"hover:bg-(--btn-bg-hover)",
47-
"hover:border-(--btn-border-hover)",
48-
],
49-
underline: [
50-
"bg-transparent pb-1 text-body",
51-
"after:absolute after:bottom-0.5 after:left-0 after:h-px after:w-full after:bg-body",
52-
"after:origin-right after:scale-x-100 after:transition-transform",
53-
"hover:after:origin-left hover:after:animate-underline-toggle",
54-
],
55-
},
56-
},
57-
defaultVariants: {
58-
variant: "primary",
59-
},
60-
},
9+
[
10+
"button relative inline-flex items-center justify-center rounded-none",
11+
"whitespace-nowrap font-normal leading-tight",
12+
"focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50!",
13+
"transition-colors",
14+
],
15+
{
16+
variants: {
17+
variant: {
18+
primary: [
19+
"border px-4 py-3",
20+
"text-(--btn-primary-text)",
21+
"bg-(--btn-primary-bg)",
22+
"border-(--btn-primary-bg)",
23+
],
24+
secondary: [
25+
"border px-4 py-3",
26+
"text-(--btn-secondary-text)",
27+
"bg-(--btn-secondary-bg)",
28+
"border-(--btn-secondary-bg)",
29+
],
30+
outline: [
31+
"border px-4 py-3",
32+
"text-(--btn-outline-text)",
33+
"bg-transparent",
34+
"border-(--btn-outline-border)",
35+
],
36+
decor: [
37+
"border-none bg-transparent p-0",
38+
"group inline-flex items-center gap-1 text-[--btn-text-decor]",
39+
],
40+
custom: [
41+
"border px-4 py-3",
42+
"text-(--btn-text)",
43+
"bg-(--btn-bg)",
44+
"border-(--btn-border)",
45+
"hover:text-(--btn-text-hover)",
46+
"hover:bg-(--btn-bg-hover)",
47+
"hover:border-(--btn-border-hover)",
48+
],
49+
underline: [
50+
"bg-transparent pb-1 text-body",
51+
"after:absolute after:bottom-0.5 after:left-0 after:h-px after:w-full after:bg-body",
52+
"after:origin-right after:scale-x-100 after:transition-transform",
53+
"hover:after:origin-left hover:after:animate-underline-toggle",
54+
],
55+
},
56+
},
57+
defaultVariants: {
58+
variant: "primary",
59+
},
60+
},
6161
);
6262

6363
export interface ButtonStyleProps {
64-
backgroundColor: string;
65-
textColor: string;
66-
borderColor: string;
67-
backgroundColorHover: string;
68-
textColorHover: string;
69-
borderColorHover: string;
64+
backgroundColor: string;
65+
textColor: string;
66+
borderColor: string;
67+
backgroundColorHover: string;
68+
textColorHover: string;
69+
borderColorHover: string;
7070
}
7171

7272
export interface ButtonProps
73-
extends VariantProps<typeof variants>,
74-
Omit<HTMLAttributes<HTMLButtonElement>, "type">,
75-
Partial<ButtonStyleProps> {
76-
type?: "button" | "reset" | "submit";
77-
className?: string;
78-
disabled?: boolean;
79-
loading?: boolean;
80-
children?: React.ReactNode;
81-
animate?: boolean;
73+
extends VariantProps<typeof variants>,
74+
Omit<HTMLAttributes<HTMLButtonElement>, "type">,
75+
Partial<ButtonStyleProps> {
76+
type?: "button" | "reset" | "submit";
77+
className?: string;
78+
disabled?: boolean;
79+
loading?: boolean;
80+
children?: React.ReactNode;
81+
animate?: boolean;
8282
}
8383

8484
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
85-
(props, ref) => {
86-
let {
87-
type = "button",
88-
variant,
89-
loading,
90-
className,
91-
textColor,
92-
backgroundColor,
93-
borderColor,
94-
textColorHover,
95-
backgroundColorHover,
96-
borderColorHover,
97-
style = {},
98-
animate = true,
99-
children,
100-
...rest
101-
} = props;
102-
if (variant === "custom") {
103-
style = {
104-
...style,
105-
"--btn-text": textColor,
106-
"--btn-bg": backgroundColor,
107-
"--btn-border": borderColor,
108-
"--btn-text-hover": textColorHover,
109-
"--btn-bg-hover": backgroundColorHover,
110-
"--btn-border-hover": borderColorHover,
111-
} as React.CSSProperties;
112-
}
85+
(props, ref) => {
86+
let {
87+
type = "button",
88+
variant,
89+
loading,
90+
className,
91+
textColor,
92+
backgroundColor,
93+
borderColor,
94+
textColorHover,
95+
backgroundColorHover,
96+
borderColorHover,
97+
style = {},
98+
animate = true,
99+
children,
100+
...rest
101+
} = props;
102+
if (variant === "custom") {
103+
style = {
104+
...style,
105+
"--btn-text": textColor,
106+
"--btn-bg": backgroundColor,
107+
"--btn-border": borderColor,
108+
"--btn-text-hover": textColorHover,
109+
"--btn-bg-hover": backgroundColorHover,
110+
"--btn-border-hover": borderColorHover,
111+
} as React.CSSProperties;
112+
}
113113

114-
if (!children) {
115-
return null;
116-
}
114+
if (!children) {
115+
return null;
116+
}
117117

118-
let content: React.ReactNode;
119-
if (typeof children === "string") {
120-
content = <span>{children}</span>;
121-
} else {
122-
content = children;
123-
}
118+
let content: React.ReactNode;
119+
if (typeof children === "string") {
120+
content = <span>{children}</span>;
121+
} else {
122+
content = children;
123+
}
124124

125-
if (animate) {
126-
rest["data-motion"] = "fade-up";
127-
}
125+
if (animate) {
126+
rest["data-motion"] = "fade-up";
127+
}
128128

129-
return (
130-
<button
131-
ref={ref}
132-
style={style}
133-
type={type}
134-
{...rest}
135-
className={cn(variants({ variant, className }))}
136-
>
137-
{loading && <Spinner />}
138-
{variant === "decor" ? (
139-
<span className="inline-flex items-center gap-1">
140-
{content}
141-
<ArrowRight
142-
size={20}
143-
weight="thin"
144-
className="transition-transform duration-300 transform group-hover:translate-x-1"
145-
/>
146-
</span>
147-
) : (
148-
content
149-
)}
150-
</button>
151-
);
152-
},
129+
return (
130+
<button
131+
ref={ref}
132+
style={style}
133+
type={type}
134+
{...rest}
135+
className={cn(variants({ variant, className }))}
136+
>
137+
{loading && <Spinner />}
138+
{variant === "decor" ? (
139+
<span className="inline-flex items-center gap-1">
140+
{content}
141+
<ArrowRight
142+
size={20}
143+
weight="thin"
144+
className="transform transition-transform duration-300 group-hover:translate-x-1"
145+
/>
146+
</span>
147+
) : (
148+
content
149+
)}
150+
</button>
151+
);
152+
},
153153
);
154154

155155
function Spinner() {
156-
const style = { "--duration": "500ms" } as React.CSSProperties;
157-
return (
158-
<span
159-
className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 [&~*]:invisible"
160-
style={style}
161-
>
162-
<CircleNotchIcon className="h-5 w-5 animate-spin" />
163-
</span>
164-
);
156+
const style = { "--duration": "500ms" } as React.CSSProperties;
157+
return (
158+
<span
159+
className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 [&~*]:invisible"
160+
style={style}
161+
>
162+
<CircleNotchIcon className="h-5 w-5 animate-spin" />
163+
</span>
164+
);
165165
}

0 commit comments

Comments
 (0)