franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate icons to r2 and optimize rendering

Browse Source
This commit is contained in:
Aman Varshney
2025-08-04 21:35:23 +05:30
parent 962c4d33a5
commit f650774042
46 changed files with 112 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/web/src/app/(home)/_components/FeatureCard.tsx
View File

@@ -3,7 +3,7 @@
import { motion } from "motion/react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
@@ -29,44 +29,46 @@ function TechIcon({
name: string;
className?: string;
}) {
const [mounted, setMounted] = useState(false);
const { theme } = useTheme();
useEffect(() => {
setMounted(true);
}, []);
if (mounted && icon.startsWith("/icon/")) {
if (
theme === "light" &&
(icon.includes("drizzle") ||
icon.includes("prisma") ||
icon.includes("express"))
) {
icon = icon.replace(".svg", "-light.svg");
}
// If no icon, return empty
if (!icon) return null;
// If it's an emoji or text icon, render as span
if (!icon.startsWith("https://")) {
return (
<Image
src={icon}
alt={`${name} icon`}
width={24}
height={24}
className={cn("h-6 w-6 object-contain", className)}
unoptimized
/>
<span
className={cn(
"flex h-6 w-6 items-center justify-center text-2xl",
className,
)}
>
{icon}
</span>
);
}
// Handle light theme variants
let iconSrc = icon;
if (
theme === "light" &&
(icon.includes("drizzle") ||
icon.includes("prisma") ||
icon.includes("express"))
) {
iconSrc = icon.replace(".svg", "-light.svg");
}
// Render as image
return (
<span
className={cn(
"flex h-6 w-6 items-center justify-center text-2xl",
className,
)}
>
{icon}
</span>
<Image
src={iconSrc}
alt={`${name} icon`}
width={24}
height={24}
className={cn("h-6 w-6 object-contain", className)}
unoptimized
/>
);
}

14
apps/web/src/app/(home)/_components/footer.tsx
View File

@@ -1,5 +1,7 @@
import { Github } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import npmIcon from "@/public/icon/npm.svg";
const Footer = () => {
return (
@@ -26,18 +28,10 @@ const Footer = () => {
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground invert-0 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:invert"
aria-label="NPM Package"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="currentColor"
>
<title>NPM</title>
<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z" />
</svg>
<Image src={npmIcon} alt="NPM" width={20} height={20} />
</Link>
</div>
</div>

59
apps/web/src/app/(home)/_components/stack-builder.tsx
View File

@@ -138,39 +138,37 @@ function TechIcon({
name: string;
className?: string;
}) {
const [mounted, setMounted] = useState(false);
const { theme } = useTheme();
useEffect(() => {
setMounted(true);
}, []);
if (mounted && icon.startsWith("/icon/")) {
if (
theme === "light" &&
(icon.includes("drizzle") ||
icon.includes("prisma") ||
icon.includes("express"))
) {
icon = icon.replace(".svg", "-light.svg");
}
if (!icon) return null;
if (!icon.startsWith("https://")) {
return (
<Image
src={icon}
alt={`${name} icon`}
width={20}
height={20}
className={cn("inline-block", className)}
unoptimized
/>
<span className={cn("inline-flex items-center text-lg", className)}>
{icon}
</span>
);
}
let iconSrc = icon;
if (
theme === "light" &&
(icon.includes("drizzle") ||
icon.includes("prisma") ||
icon.includes("express"))
) {
iconSrc = icon.replace(".svg", "-light.svg");
}
return (
<span className={cn("inline-flex items-center text-lg", className)}>
{icon}
</span>
<Image
src={iconSrc}
alt={`${name} icon`}
width={20}
height={20}
className={cn("inline-block", className)}
unoptimized
/>
);
}
@@ -1202,12 +1200,7 @@ const StackBuilder = () => {
<TechIcon
icon={tech.icon}
name={tech.name}
className={cn(
tech.icon.startsWith("/icon/")
? "h-3 w-3"
: "h-3 w-3 text-xs",
tech.className,
)}
className={cn("h-3 w-3", tech.className)}
/>
)}
{tech.name}
@@ -1236,9 +1229,7 @@ const StackBuilder = () => {
getBadgeColors(category),
)}
>
{tech.icon !== "" && (
<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
)}
<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
{tech.name}
</span>,
);

4
apps/web/src/app/(home)/analytics/page.tsx
View File

@@ -24,7 +24,7 @@ import {
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";
import discordLogo from "@/public/icon/discord.svg";
import discordIcon from "@/public/icon/discord.svg";
import Footer from "../_components/footer";
interface AggregatedAnalyticsData {
@@ -650,7 +650,7 @@ export default function AnalyticsPage() {
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-3">
<Image
src={discordLogo}
src={discordIcon}
alt="discord"
className="h-4 w-4 invert-0 dark:invert"
/>