63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { MessageCircle, Twitter, Youtube, Twitch } from 'lucide-react';
|
|
import type { DriverProfileSocialHandleViewModel } from '@/lib/view-models/DriverProfileViewModel';
|
|
|
|
interface SocialHandlesProps {
|
|
socialHandles: DriverProfileSocialHandleViewModel[];
|
|
}
|
|
|
|
function getSocialIcon(platform: DriverProfileSocialHandleViewModel['platform']) {
|
|
switch (platform) {
|
|
case 'twitter':
|
|
return Twitter;
|
|
case 'youtube':
|
|
return Youtube;
|
|
case 'twitch':
|
|
return Twitch;
|
|
case 'discord':
|
|
return MessageCircle;
|
|
}
|
|
}
|
|
|
|
function getSocialColor(platform: DriverProfileSocialHandleViewModel['platform']) {
|
|
switch (platform) {
|
|
case 'twitter':
|
|
return 'hover:text-sky-400 hover:bg-sky-400/10';
|
|
case 'youtube':
|
|
return 'hover:text-red-500 hover:bg-red-500/10';
|
|
case 'twitch':
|
|
return 'hover:text-purple-400 hover:bg-purple-400/10';
|
|
case 'discord':
|
|
return 'hover:text-indigo-400 hover:bg-indigo-400/10';
|
|
}
|
|
}
|
|
|
|
export default function SocialHandles({ socialHandles }: SocialHandlesProps) {
|
|
if (socialHandles.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-6 pt-6 border-t border-charcoal-outline/50">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm text-gray-500 mr-2">Connect:</span>
|
|
{socialHandles.map((social) => {
|
|
const Icon = getSocialIcon(social.platform);
|
|
return (
|
|
<a
|
|
key={social.platform}
|
|
href={social.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline text-gray-400 transition-all ${getSocialColor(social.platform)}`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
<span className="text-sm">{social.handle}</span>
|
|
<svg className="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |