f4f21b6c36
- "frontend/src/components/SocialIcons.tsx" - "frontend/src/pages/CreatorDetail.tsx" - "frontend/src/App.css" GSD-Task: S02/T02
110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
/**
|
|
* Inline SVG icons for social media platforms.
|
|
* Monoline stroke style matching CategoryIcons.tsx.
|
|
*/
|
|
|
|
const S = { width: "1.25em", height: "1.25em", verticalAlign: "-0.15em" } as const;
|
|
const P = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
|
|
|
|
export function IconInstagram() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<rect {...P} x="2" y="2" width="20" height="20" rx="5" />
|
|
<circle {...P} cx="12" cy="12" r="5" />
|
|
<circle fill="currentColor" stroke="none" cx="17.5" cy="6.5" r="1.2" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconYoutube() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<rect {...P} x="2" y="4" width="20" height="16" rx="4" />
|
|
<polygon {...P} points="10,8.5 16,12 10,15.5" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconBandcamp() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<polygon {...P} points="6,16 10,8 18,8 14,16" strokeWidth={1.8} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconSoundcloud() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<path {...P} d="M2 16 v-3 M5 16 v-5 M8 16 v-7 M11 16 v-8 M14 16 v-6" strokeWidth={1.8} />
|
|
<path {...P} d="M16 16 v-7 a4 4 0 0 1 4 0 v7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconTwitter() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<path {...P} d="M4 20 L10.5 12 M13.5 12 L20 4" strokeWidth={1.8} />
|
|
<path {...P} d="M20 20 L13.5 12 M10.5 12 L4 4" strokeWidth={1.8} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconSpotify() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<circle {...P} cx="12" cy="12" r="10" />
|
|
<path {...P} d="M7 9.5 q5-2 10 0" />
|
|
<path {...P} d="M8 12.5 q4-1.5 8 0" />
|
|
<path {...P} d="M9 15.5 q3-1 6 0" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconFacebook() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<rect {...P} x="2" y="2" width="20" height="20" rx="5" />
|
|
<path {...P} d="M15 3 v4 h-2 a1 1 0 0 0-1 1 v3 h3 l-0.5 3 H12 v7" strokeWidth={1.8} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconTwitch() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<path {...P} d="M4 3 L4 19 H8 V22 L11 19 H15 L20 14 V3 Z" />
|
|
<line {...P} x1="10" y1="8" x2="10" y2="12" />
|
|
<line {...P} x1="15" y1="8" x2="15" y2="12" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function IconGlobe() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" style={S}>
|
|
<circle {...P} cx="12" cy="12" r="10" />
|
|
<ellipse {...P} cx="12" cy="12" rx="4" ry="10" />
|
|
<line {...P} x1="2" y1="12" x2="22" y2="12" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const ICON_MAP: Record<string, () => JSX.Element> = {
|
|
instagram: IconInstagram,
|
|
youtube: IconYoutube,
|
|
bandcamp: IconBandcamp,
|
|
soundcloud: IconSoundcloud,
|
|
twitter: IconTwitter,
|
|
x: IconTwitter,
|
|
spotify: IconSpotify,
|
|
facebook: IconFacebook,
|
|
twitch: IconTwitch,
|
|
};
|
|
|
|
/** Resolves a platform name to the matching icon, falling back to globe. */
|
|
export function SocialIcon({ platform }: { platform: string }) {
|
|
const Icon = ICON_MAP[platform.toLowerCase()] ?? IconGlobe;
|
|
return <Icon />;
|
|
}
|