Vula Builder
56 lines
2.8 KiB
TypeScript
56 lines
2.8 KiB
TypeScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
interface Social { network: string; url: string }
|
|
|
|
/** Inline SVGs, so the site needs no icon package for this. */
|
|
const PATHS: Record<string, string> = {
|
|
facebook: 'M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z',
|
|
instagram: 'M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.9c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-3.2-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9C2.4 3.9 4 2.4 7.1 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.2a1.6 1.6 0 1 1-3.1 0 1.6 1.6 0 0 1 3.1 0z',
|
|
tiktok: 'M16.6 5.8a4.8 4.8 0 0 1-1.2-3.2h-3.3v13.1a2.9 2.9 0 1 1-2-2.8V9.5a6.1 6.1 0 1 0 5.3 6V9.1a8 8 0 0 0 4.6 1.5V7.3a4.8 4.8 0 0 1-3.4-1.5z',
|
|
linkedin: 'M6.9 21.5H3.3V9.1h3.6v12.4zM5.1 7.5a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm16.4 14h-3.6v-6c0-1.4 0-3.3-2-3.3s-2.3 1.6-2.3 3.2v6.1H10V9.1h3.4v1.7h.1a3.8 3.8 0 0 1 3.4-1.9c3.6 0 4.3 2.4 4.3 5.5v7.1z',
|
|
whatsapp: 'M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.8 14.1c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3.1-1.3-5.1-4.4-5.3-4.6-.1-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.1.3.6 1.1 1.4 1.8 1 .9 1.8 1.1 2.1 1.2.3.1.4.1.6-.1l.8-1c.2-.2.3-.2.6-.1l2 1c.3.1.4.2.5.3 0 .1 0 .5-.2 1.1z',
|
|
}
|
|
|
|
const LABELS: Record<string, string> = {
|
|
facebook: 'Facebook', instagram: 'Instagram', tiktok: 'TikTok',
|
|
linkedin: 'LinkedIn', whatsapp: 'WhatsApp',
|
|
}
|
|
|
|
export default function BusinessSocials({ className = '' }: { className?: string }) {
|
|
const [socials, setSocials] = useState<Social[]>([])
|
|
|
|
useEffect(() => {
|
|
const base = process.env.NEXT_PUBLIC_VULA_COMMERCE_URL
|
|
const id = process.env.NEXT_PUBLIC_VULA_PROJECT_ID
|
|
if (!base || !id) return
|
|
let live = true
|
|
fetch(base + '/api/public/profile/' + id)
|
|
.then((r) => (r.ok ? r.json() : null))
|
|
.then((d) => { if (live && Array.isArray(d?.profile?.socials)) setSocials(d.profile.socials) })
|
|
.catch(() => { /* no icons is where the site already was */ })
|
|
return () => { live = false }
|
|
}, [])
|
|
|
|
if (!socials.length) return null
|
|
|
|
return (
|
|
<div className={'flex items-center gap-3 ' + className}>
|
|
{socials.map((s) => (
|
|
<a
|
|
key={s.network}
|
|
href={s.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={LABELS[s.network] ?? s.network}
|
|
className="opacity-70 transition-opacity hover:opacity-100"
|
|
>
|
|
<svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
|
|
<path d={PATHS[s.network]} />
|
|
</svg>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|