Profile Section
Section d'affichage du profil utilisateur avec avatar et details. Installez Profile Section depuis le registre VLLNT UI avec la CLI shadcn.
Section d'affichage du profil utilisateur avec avatar et details. Fait partie de la famille learning 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 Profile 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/profile-section.jsonSource
import Image from "next/image";
import Link from "next/link";
import type { HeadingTag } from "../../lib/types";
import { Button } from "../button/button";
type ProfileDict = {
profile: {
name: string;
tagline: string;
};
};
type SocialLink = {
href: string;
label: string;
};
type ProfileSectionProps = {
/** Heading tag for the profile name. Defaults to `h3`. */
as?: HeadingTag;
compact?: boolean;
dict: ProfileDict;
imageAlt?: string;
imageSource?: string;
socialLinks?: SocialLink[];
};
export function ProfileSection({
as: Heading = "h3",
compact = false,
dict,
imageAlt,
imageSource = "/profile.png",
socialLinks,
}: ProfileSectionProps) {
const displayImageAlt = imageAlt ?? `${dict.profile.name} Profile`;
const showImage = !compact && Boolean(imageSource);
const showSocialLinks =
!compact && Boolean(socialLinks && socialLinks.length > 0);
return (
<div className="text-center space-y-4">
{showImage ? (
<div className="relative size-24 mx-auto overflow-hidden rounded-md">
<Image
alt={displayImageAlt}
className="w-full h-full object-cover rounded-md"
height={96}
priority={true}
src={imageSource}
width={96}
/>
</div>
) : null}
<div className="space-y-2">
<Heading className={`font-semibold ${compact ? "text-lg" : "text-xl"}`}>
{dict.profile.name}
</Heading>
<p className="text-sm text-muted-foreground">
{compact ? dict.profile.tagline : `> ${dict.profile.tagline}`}
</p>
</div>
{showSocialLinks ? (
<div className="flex flex-wrap justify-center items-center gap-2">
{socialLinks?.map((link) => (
<Link
href={link.href}
key={link.href}
rel="noopener noreferrer"
target="_blank"
>
<Button className="w-32" size="sm" variant="outline">
{link.label}
</Button>
</Link>
))}
</div>
) : null}
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.