Share Section
Section de boutons de partage social et de copie du lien. Installez Share Section depuis le registre VLLNT UI avec la CLI shadcn.
Section de boutons de partage social et de copie du lien. Fait partie de la famille content dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Share Section a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/share-section.jsonSource
import type { HeadingTag } from "../../lib/types";
export type SharePlatform =
| "bluesky"
| "facebook"
| "linkedin"
| "mastodon"
| "threads"
| "x";
export type PlatformConfig = {
key: SharePlatform;
label: string;
};
const defaultPlatforms: PlatformConfig[] = [
{ key: "x", label: "X" },
{ key: "linkedin", label: "LinkedIn" },
{ key: "facebook", label: "Facebook" },
{ key: "mastodon", label: "Mastodon" },
{ key: "bluesky", label: "Bluesky" },
{ key: "threads", label: "Threads" },
];
function buildShareUrl(
platform: SharePlatform,
url: string,
title: string,
): string {
const encodedUrl = encodeURIComponent(url);
const encodedTitle = encodeURIComponent(title);
switch (platform) {
case "x":
return `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`;
case "linkedin":
return `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
case "facebook":
return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
case "mastodon":
return `https://mastodon.social/share?text=${encodedTitle}%20${encodedUrl}`;
case "bluesky":
return `https://bsky.app/intent/compose?text=${encodedTitle}%20${encodedUrl}`;
case "threads":
return `https://www.threads.net/intent/post?text=${encodedTitle}%20${encodedUrl}`;
}
}
type ShareSectionProps = {
/** Heading tag for the share title. Defaults to `h3`. */
as?: HeadingTag;
buildUrl?: (platform: SharePlatform, url: string, title: string) => string;
platforms?: PlatformConfig[];
shareOn: string;
shareTitle: string;
title: string;
url: string;
};
export function ShareSection({
as: Heading = "h3",
buildUrl: buildUrlFunction = buildShareUrl,
platforms = defaultPlatforms,
shareOn,
shareTitle,
title,
url,
}: ShareSectionProps) {
return (
<div className="border-t border-border pt-6 mt-8">
<Heading className="text-lg font-semibold mb-4">{shareTitle}</Heading>
<div className="flex flex-wrap gap-3">
{platforms.map((platform) => (
<a
className="text-sm text-muted-foreground hover:text-foreground transition-colors border border-border px-3 py-1.5 hover:bg-accent rounded-md"
href={buildUrlFunction(platform.key, url, title)}
key={platform.key}
rel="noopener noreferrer"
target="_blank"
>
{shareOn} {platform.label}
</a>
))}
</div>
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.