Skip to content

Commit e73c558

Browse files
AIPTUAIPTU
committed
feat: imp
1 parent 1149eb5 commit e73c558

9 files changed

Lines changed: 347 additions & 140 deletions

File tree

‎app/components/Button.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,56 @@ import { SequenceType } from "../types/sequence";
33

44
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
55
children: ReactNode;
6-
variant?: "primary" | "secondary" | SequenceType;
6+
variant?: "primary" | "secondary" | "outline" | SequenceType;
77
fullWidth?: boolean;
8+
size?: "sm" | "md" | "lg";
9+
icon?: ReactNode;
810
}
911

1012
export default function Button({
1113
children,
1214
variant = "primary",
1315
fullWidth = false,
16+
size = "md",
17+
icon,
1418
className = "",
1519
...props
1620
}: ButtonProps) {
1721
const baseStyles =
18-
"px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background";
22+
"relative inline-flex items-center justify-center rounded-xl font-bold transition-all duration-300 transform active:scale-[0.98] shadow-lg disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent overflow-hidden group";
23+
24+
const sizeStyles = {
25+
sm: "px-4 py-2 text-sm",
26+
md: "px-6 py-3 text-base",
27+
lg: "px-8 py-4 text-lg",
28+
};
1929

2030
const variantStyles: Record<string, string> = {
2131
primary:
22-
"bg-primary text-primary-foreground hover:brightness-110 focus:ring-primary",
32+
"bg-gradient-to-r from-primary to-orange-400 text-white shadow-orange-500/20 hover:shadow-orange-500/40 border border-orange-400/20",
2333
secondary:
24-
"bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary",
34+
"bg-white/10 text-white hover:bg-white/20 border border-white/5 backdrop-blur-sm",
35+
outline:
36+
"bg-transparent border-2 border-white/20 text-white hover:bg-white/5 hover:border-white/40",
2537
arithmetic:
26-
"bg-seq-arithmetic text-white hover:brightness-110 focus:ring-seq-arithmetic",
38+
"bg-gradient-to-r from-blue-600 to-blue-400 text-white shadow-blue-500/20 hover:shadow-blue-500/40 border border-blue-400/20",
2739
geometric:
28-
"bg-seq-geometric text-white hover:brightness-110 focus:ring-seq-geometric",
40+
"bg-gradient-to-r from-purple-600 to-purple-400 text-white shadow-purple-500/20 hover:shadow-purple-500/40 border border-purple-400/20",
2941
alphabet:
30-
"bg-seq-alphabet text-white hover:brightness-110 focus:ring-seq-alphabet",
42+
"bg-gradient-to-r from-emerald-600 to-emerald-400 text-white shadow-emerald-500/20 hover:shadow-emerald-500/40 border border-emerald-400/20",
3143
};
3244

3345
const widthStyles = fullWidth ? "w-full" : "w-auto";
3446

3547
return (
3648
<button
37-
className={`${baseStyles} ${variantStyles[variant]} ${widthStyles} ${className}`}
49+
className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${widthStyles} ${className}`}
3850
{...props}
3951
>
40-
{children}
52+
<div className="pointer-events-none absolute inset-0 translate-y-full bg-white/20 transition-transform duration-300 ease-in-out group-hover:translate-y-0" />
53+
54+
{icon && <span className="mr-2 text-xl">{icon}</span>}
55+
<span className="relative z-10 flex items-center gap-2">{children}</span>
4156
</button>
4257
);
4358
}

‎app/components/Card.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,41 @@ import { HTMLAttributes, ReactNode } from "react";
22

33
interface CardProps extends HTMLAttributes<HTMLDivElement> {
44
children: ReactNode;
5-
variant?: "default" | "glass";
5+
variant?: "default" | "glass" | "glass-heavy";
6+
hoverEffect?: boolean;
67
}
78

89
export default function Card({
910
children,
1011
className = "",
1112
variant = "glass",
13+
hoverEffect = false,
1214
...props
1315
}: CardProps) {
14-
const baseStyles = "rounded-xl p-6 transition-all duration-300";
16+
const baseStyles =
17+
"rounded-2xl p-6 transition-all duration-300 relative overflow-hidden";
1518

1619
const variants = {
17-
default: "bg-secondary text-secondary-foreground shadow-lg",
20+
default:
21+
"bg-secondary text-secondary-foreground shadow-lg border border-white/5",
1822
glass: "glass text-card-foreground",
23+
"glass-heavy":
24+
"bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl text-card-foreground",
1925
};
2026

27+
const hoverStyles = hoverEffect
28+
? "hover:scale-[1.01] hover:shadow-2xl hover:border-white/20"
29+
: "";
30+
2131
return (
2232
<div
23-
className={`${baseStyles} ${variants[variant]} ${className}`}
33+
className={`${baseStyles} ${variants[variant]} ${hoverStyles} ${className}`}
2434
{...props}
2535
>
26-
{children}
36+
{hoverEffect && (
37+
<div className="pointer-events-none absolute inset-0 bg-linear-to-tr from-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
38+
)}
39+
<div className="relative z-10">{children}</div>
2740
</div>
2841
);
2942
}

‎app/components/GenerateSequence.tsx‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ import { SequenceType } from "../types/sequence";
66
import { generateSequence } from "../utils/sequenceCalculations";
77
import Button from "./Button";
88
import Card from "./Card";
9+
import {
10+
TbMathFunction,
11+
TbNumbers,
12+
TbListNumbers,
13+
TbCopy,
14+
TbArrowLeft,
15+
} from "react-icons/tb";
916

1017
interface GenerateSequenceProps {
1118
sequenceType: SequenceType;
@@ -62,21 +69,26 @@ export default function GenerateSequence({
6269
};
6370

6471
const inputClasses =
65-
"w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all";
72+
"w-full px-10 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all hover:bg-white/10";
6673

6774
return (
6875
<div className="mx-auto w-full max-w-2xl space-y-8">
69-
<div className="mb-8 flex items-center justify-between">
70-
<Button onClick={goBack} variant="secondary" className="px-4!">
71-
← Back
76+
<div className="flex items-center justify-between">
77+
<Button
78+
onClick={goBack}
79+
variant="secondary"
80+
size="sm"
81+
icon={<TbArrowLeft />}
82+
>
83+
Back
7284
</Button>
7385
<motion.h2
7486
className="text-center text-2xl font-bold md:text-3xl"
7587
initial={{ opacity: 0, y: -10 }}
7688
animate={{ opacity: 1, y: 0 }}
7789
>
7890
Generate{" "}
79-
<span className={`text-seq-${sequenceType}`}>
91+
<span className={`text-seq-${sequenceType} text-glow`}>
8092
{sequenceType.charAt(0).toUpperCase() + sequenceType.slice(1)}
8193
</span>{" "}
8294
Sequence
@@ -87,53 +99,65 @@ export default function GenerateSequence({
8799
<form onSubmit={handleSubmit} className="space-y-6">
88100
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
89101
<div className="space-y-2">
90-
<label className="block text-sm font-medium text-white/80">
102+
<label className="ml-1 block text-sm font-medium text-white/80">
91103
Initial Term
92104
</label>
93-
<input
94-
type={sequenceType === "alphabet" ? "text" : "number"}
95-
value={initialTerm}
96-
onChange={(e) => setInitialTerm(e.target.value)}
97-
required
98-
placeholder={sequenceType === "alphabet" ? "e.g., A" : "e.g., 1"}
99-
className={inputClasses}
100-
/>
105+
<div className="relative">
106+
<TbMathFunction className="absolute top-1/2 left-3 -translate-y-1/2 text-lg text-white/40" />
107+
<input
108+
type={sequenceType === "alphabet" ? "text" : "number"}
109+
value={initialTerm}
110+
onChange={(e) => setInitialTerm(e.target.value)}
111+
required
112+
placeholder={
113+
sequenceType === "alphabet" ? "e.g., A" : "e.g., 1"
114+
}
115+
className={inputClasses}
116+
/>
117+
</div>
101118
</div>
102119

103120
<div className="space-y-2">
104-
<label className="block text-sm font-medium text-white/80">
121+
<label className="ml-1 block text-sm font-medium text-white/80">
105122
{getLabel()}
106123
</label>
107-
<input
108-
type="number"
109-
value={commonDifferenceOrRatio}
110-
onChange={(e) => setCommonDifferenceOrRatio(e.target.value)}
111-
required
112-
placeholder="e.g., 2"
113-
className={inputClasses}
114-
/>
124+
<div className="relative">
125+
<TbNumbers className="absolute top-1/2 left-3 -translate-y-1/2 text-lg text-white/40" />
126+
<input
127+
type="number"
128+
value={commonDifferenceOrRatio}
129+
onChange={(e) => setCommonDifferenceOrRatio(e.target.value)}
130+
required
131+
placeholder="e.g., 2"
132+
className={inputClasses}
133+
/>
134+
</div>
115135
</div>
116136

117137
<div className="space-y-2 md:col-span-2">
118-
<label className="block text-sm font-medium text-white/80">
138+
<label className="ml-1 block text-sm font-medium text-white/80">
119139
Number of Terms
120140
</label>
121-
<input
122-
type="number"
123-
value={numberOfTerms}
124-
onChange={(e) => setNumberOfTerms(e.target.value)}
125-
required
126-
placeholder="e.g., 5"
127-
className={inputClasses}
128-
/>
141+
<div className="relative">
142+
<TbListNumbers className="absolute top-1/2 left-3 -translate-y-1/2 text-lg text-white/40" />
143+
<input
144+
type="number"
145+
value={numberOfTerms}
146+
onChange={(e) => setNumberOfTerms(e.target.value)}
147+
required
148+
placeholder="e.g., 5"
149+
className={inputClasses}
150+
/>
151+
</div>
129152
</div>
130153
</div>
131154

132155
<Button
133156
type="submit"
134157
variant={sequenceType}
135158
fullWidth
136-
className="text-lg"
159+
size="lg"
160+
className="shadow-xl"
137161
>
138162
Generate Sequence
139163
</Button>
@@ -144,26 +168,31 @@ export default function GenerateSequence({
144168
initial={{ opacity: 0, y: 20 }}
145169
animate={{ opacity: 1, y: 0 }}
146170
>
147-
<Card className="space-y-4 border-white/5 bg-black/20">
148-
<div className="mb-4 flex items-center justify-between">
171+
<Card
172+
className="space-y-6 border-white/10 bg-black/40 backdrop-blur-md"
173+
hoverEffect
174+
>
175+
<div className="flex items-center justify-between border-b border-white/10 pb-4">
149176
<h3 className="text-xl font-bold text-white/90">Results</h3>
150177
<Button
151178
onClick={handleCopy}
152179
variant="secondary"
153-
className="px-3 py-1 text-xs"
180+
size="sm"
181+
icon={<TbCopy />}
154182
>
155183
Copy
156184
</Button>
157185
</div>
158186

159-
<div className="flex flex-wrap justify-center gap-2">
187+
<div className="flex flex-wrap justify-center gap-3">
160188
{generatedSequence.map((value, index) => (
161189
<motion.div
162190
key={index}
163191
initial={{ opacity: 0, scale: 0 }}
164192
animate={{ opacity: 1, scale: 1 }}
165-
transition={{ delay: index * 0.05 }}
166-
className={`bg-seq-${sequenceType} bg-opacity-20 border border-seq-${sequenceType}/30 min-w-12 rounded-lg px-4 py-2 text-center font-mono text-lg font-bold`}
193+
transition={{ delay: index * 0.05, type: "spring" }}
194+
whileHover={{ scale: 1.1, translateY: -2 }}
195+
className={`bg-seq-${sequenceType}/20 border border-seq-${sequenceType}/30 min-w-[60px] rounded-xl px-4 py-3 text-center font-mono text-xl font-bold shadow-lg backdrop-blur-sm`}
167196
>
168197
{value}
169198
</motion.div>

0 commit comments

Comments
 (0)