117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
'use client'
|
|
|
|
export interface SocialLink {
|
|
platform: 'twitter' | 'instagram' | 'facebook' | 'youtube' | 'spotify' | 'soundcloud' | 'website'
|
|
url: string
|
|
}
|
|
|
|
export interface SocialLinksProps {
|
|
links: SocialLink[]
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export function SocialLinks({ links, size = 'md' }: SocialLinksProps) {
|
|
const sizeClasses = {
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-12 h-12'
|
|
}
|
|
|
|
const iconSize = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-5 h-5',
|
|
lg: 'w-6 h-6'
|
|
}
|
|
|
|
const getPlatformIcon = (platform: SocialLink['platform']) => {
|
|
const className = iconSize[size]
|
|
|
|
switch (platform) {
|
|
case 'twitter':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
|
</svg>
|
|
)
|
|
case 'instagram':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
|
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" fill="none" stroke="currentColor" strokeWidth="2" />
|
|
<circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" />
|
|
</svg>
|
|
)
|
|
case 'facebook':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
|
</svg>
|
|
)
|
|
case 'youtube':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z" />
|
|
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="black" />
|
|
</svg>
|
|
)
|
|
case 'spotify':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M8 14.5c.8-.4 2.7-1 4-1s3.2.6 4 1M7.5 11c1-.5 3-1.2 4.5-1.2s3.5.7 4.5 1.2M7 7.5c1.2-.6 3.5-1.5 5-1.5s3.8.9 5 1.5" stroke="black" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
|
</svg>
|
|
)
|
|
case 'soundcloud':
|
|
return (
|
|
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M1.5 11.5l.5 1-.5 1-.5-1 .5-1zm1 0l.5 2-.5 2-.5-2 .5-2zm1 0l.5 2.5-.5 2.5-.5-2.5.5-2.5zm1 0l.5 3-.5 3-.5-3 .5-3zm1-.5l.5 3.5-.5 3.5-.5-3.5.5-3.5zm1 0l.5 4-.5 4-.5-4 .5-4zm1-.5l.5 4.5-.5 4.5-.5-4.5.5-4.5zm1 0l.5 5-.5 5-.5-5 .5-5zm1-.5l.5 5.5-.5 5.5-.5-5.5.5-5.5zm1 0l.5 6-.5 6-.5-6 .5-6zm1 0l.5 6-.5 6-.5-6 .5-6zm3 1.5c1.5 0 2.5 1 2.5 2.5s-1 2.5-2.5 2.5h-2v-5h2z" />
|
|
</svg>
|
|
)
|
|
case 'website':
|
|
return (
|
|
<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
</svg>
|
|
)
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
const getPlatformColor = (platform: SocialLink['platform']) => {
|
|
switch (platform) {
|
|
case 'twitter':
|
|
return 'hover:bg-blue-500'
|
|
case 'instagram':
|
|
return 'hover:bg-pink-500'
|
|
case 'facebook':
|
|
return 'hover:bg-blue-600'
|
|
case 'youtube':
|
|
return 'hover:bg-red-500'
|
|
case 'spotify':
|
|
return 'hover:bg-green-500'
|
|
case 'soundcloud':
|
|
return 'hover:bg-orange-500'
|
|
default:
|
|
return 'hover:bg-zinc-700'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
{links.map((link, index) => (
|
|
<a
|
|
key={index}
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`${sizeClasses[size]} flex items-center justify-center rounded-full bg-zinc-800 text-zinc-300 ${getPlatformColor(link.platform)} hover:text-white transition`}
|
|
title={link.platform}
|
|
>
|
|
{getPlatformIcon(link.platform)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|