Skip to content

Commit 0af6678

Browse files
authored
fix: revert colors for FeatureCard (#1045)
1 parent 2480518 commit 0af6678

File tree

3 files changed

+45
-26
lines changed

3 files changed

+45
-26
lines changed

app/_components/feature-card.tsx

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,45 @@ interface FeatureCardProps {
66
icon: IconDefinition;
77
title: string;
88
description: string;
9-
gradientFrom?: string;
10-
gradientTo?: string;
11-
borderColor?: string;
9+
colorScheme?: "primary" | "blue" | "purple" | "green" | "orange" | "red";
1210
className?: string;
1311
}
1412

13+
const cardColorVariants = {
14+
primary:
15+
"bg-gradient-to-br from-primary/5 to-secondary/10 border-primary/20",
16+
blue: "bg-gradient-to-br from-primary/5 to-primary/10 border-primary/20",
17+
purple: "bg-gradient-to-br from-secondary/5 to-secondary/10 border-secondary/20",
18+
green: "bg-gradient-to-br from-success/5 to-success/10 border-success/20",
19+
orange: "bg-gradient-to-br from-warning/5 to-warning/10 border-warning/20",
20+
red: "bg-gradient-to-br from-danger/5 to-danger/10 border-danger/20",
21+
};
22+
23+
const iconColorMapping = {
24+
primary: "primary" as const,
25+
blue: "blue" as const,
26+
purple: "purple" as const,
27+
green: "green" as const,
28+
orange: "orange" as const,
29+
red: "red" as const,
30+
};
31+
1532
export function FeatureCard({
1633
icon,
1734
title,
1835
description,
19-
gradientFrom = "primary/5",
20-
gradientTo = "primary/10",
21-
borderColor = "primary/20",
36+
colorScheme = "primary",
2237
className = "",
2338
}: FeatureCardProps) {
2439
return (
25-
<Card
26-
className={`bg-gradient-to-br from-${gradientFrom} to-${gradientTo} border-${borderColor} ${className}`}
27-
>
40+
<Card className={`${cardColorVariants[colorScheme]} ${className}`}>
2841
<CardHeader className="pb-4">
2942
<div className="flex items-center gap-3">
30-
<GradientIcon icon={icon} size="lg" />
43+
<GradientIcon
44+
icon={icon}
45+
size="lg"
46+
colorScheme={iconColorMapping[colorScheme]}
47+
/>
3148
<h3 className="text-xl font-semibold">{title}</h3>
3249
</div>
3350
</CardHeader>

app/_components/gradient-icon.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
44
interface GradientIconProps {
55
icon: IconDefinition;
66
size?: "sm" | "md" | "lg" | "xl";
7+
colorScheme?: "primary" | "blue" | "purple" | "green" | "orange" | "red";
78
className?: string;
89
iconClassName?: string;
910
}
@@ -22,15 +23,25 @@ const iconSizeClasses = {
2223
xl: "text-xl",
2324
};
2425

26+
const colorVariants = {
27+
primary: "bg-gradient-to-br from-primary-500 to-secondary-500",
28+
blue: "bg-gradient-to-br from-primary-500 to-primary-600",
29+
purple: "bg-gradient-to-br from-secondary-500 to-secondary-600",
30+
green: "bg-gradient-to-br from-success-500 to-success-600",
31+
orange: "bg-gradient-to-br from-warning-500 to-warning-600",
32+
red: "bg-gradient-to-br from-danger-500 to-danger-600",
33+
};
34+
2535
export function GradientIcon({
2636
icon,
2737
size = "md",
38+
colorScheme = "primary",
2839
className = "",
2940
iconClassName = "",
3041
}: GradientIconProps) {
3142
return (
3243
<div
33-
className={`flex items-center justify-center ${sizeClasses[size]} bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg shadow-sm ${className}`}
44+
className={`flex items-center justify-center ${sizeClasses[size]} ${colorVariants[colorScheme]} rounded-lg shadow-sm ${className}`}
3445
>
3546
<FontAwesomeIcon
3647
icon={icon}

app/page.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -133,51 +133,42 @@ export default function Home() {
133133
icon={faBolt}
134134
title="Lightning Fast"
135135
description="Optimized build system with parallel processing and smart caching for blazing fast builds."
136+
colorScheme="blue"
136137
/>
137138

138139
<FeatureCard
139140
icon={faCode}
140141
title="Developer Friendly"
141142
description="Intuitive CLI with helpful error messages and comprehensive documentation."
142-
gradientFrom="secondary/5"
143-
gradientTo="secondary/10"
144-
borderColor="secondary/20"
143+
colorScheme="purple"
145144
/>
146145

147146
<FeatureCard
148147
icon={faBox}
149148
title="Rich Ecosystem"
150149
description="Growing ecosystem of C++ packages with seamless dependency management."
151-
gradientFrom="success/5"
152-
gradientTo="success/10"
153-
borderColor="success/20"
150+
colorScheme="green"
154151
/>
155152

156153
<FeatureCard
157154
icon={faCog}
158155
title="Zero Configuration"
159156
description="Works out of the box with sensible defaults. No complex setup required."
160-
gradientFrom="warning/5"
161-
gradientTo="warning/10"
162-
borderColor="warning/20"
157+
colorScheme="orange"
163158
/>
164159

165160
<FeatureCard
166161
icon={faRocket}
167162
title="Modern Standards"
168163
description="Built with modern C++ standards and best practices in mind."
169-
gradientFrom="danger/5"
170-
gradientTo="danger/10"
171-
borderColor="danger/20"
164+
colorScheme="red"
172165
/>
173166

174167
<FeatureCard
175168
icon={faHouseChimneyWindow}
176169
title="Cross Platform"
177170
description="Works seamlessly on macOS and Linux with consistent behavior."
178-
gradientFrom="primary/5"
179-
gradientTo="secondary/10"
180-
borderColor="primary/20"
171+
colorScheme="primary"
181172
/>
182173
</div>
183174
</div>

0 commit comments

Comments
 (0)