Florian Wilde
fdf6452b35
Social Media buendelt Profile auf einer Seite. Wer „@firma" eintippt, meint das Profil beim gewaehlten Netzwerk — daraus wird die volle Adresse. Statt nachgezeichneter Markenlogos steht ein Kreis in der Hausfarbe mit Monogramm; ein schlecht nachgebautes Logo sieht schlechter aus als ein sauberes Zeichen. Video erkennt YouTube, Vimeo und direkte Dateien. Der Rahmen zum Anbieter laedt erst auf Klick, und davor steht, dass dabei Daten uebertragen werden — diese Seite bekommen Fremde nach einem Scan zu sehen, ungefragt einen Drittanbieter einzubinden waere nicht in Ordnung. Videodateien laden mit preload="none": wer unterwegs scannt, zahlt das Volumen.
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { Icon } from "@/components/icons";
|
|
import { LandingShell } from "@/components/landing/shell";
|
|
import type { LandingProps } from "@/components/landing/types";
|
|
import {
|
|
getSocialNetwork,
|
|
socialHandleLabel,
|
|
} from "@/lib/qr/social-networks";
|
|
import { socialDataSchema } from "@/lib/qr/types/social";
|
|
|
|
export function SocialLanding({ data }: LandingProps) {
|
|
const { title, description, profiles } = socialDataSchema.parse(data);
|
|
|
|
return (
|
|
<LandingShell title={title} subtitle={description || null}>
|
|
<ul className="space-y-3">
|
|
{profiles.map((profile) => {
|
|
const network = getSocialNetwork(profile.network);
|
|
return (
|
|
<li key={profile.network}>
|
|
<a
|
|
href={profile.url}
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-3.5 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-slate-900 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
|
|
style={{ backgroundColor: network?.color ?? "#475569" }}
|
|
>
|
|
{network?.monogram ?? "?"}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block font-medium">
|
|
{network?.label ?? profile.network}
|
|
</span>
|
|
<span className="block truncate text-sm text-slate-500">
|
|
{socialHandleLabel(profile.url)}
|
|
</span>
|
|
</span>
|
|
<Icon
|
|
name="external"
|
|
className="size-4 shrink-0 text-slate-400"
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</LandingShell>
|
|
);
|
|
}
|