Profile Card

import { ArrowUpRightIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ProfileCard } from "@/components/blobz/profile-card";

const PROFILE_NAME = "Kalpana Chawla";

export function ProfileCardExample() {
	return (
		<ProfileCard
			actions={
				<Button
					nativeButton={false}
					render={
						<a
							href="https://www.nasa.gov/image-article/kalpana-chawla/"
							rel="noopener"
							target="_blank"
						/>
					}
					size="sm"
					variant="outline"
				>
					Biography
					<ArrowUpRightIcon aria-hidden="true" data-icon="inline-end" />
				</Button>
			}
			avatar={{ name: PROFILE_NAME, palette: ["#dff4ff", "#38bdf8"] }}
			badge={<Badge variant="secondary">NASA</Badge>}
			bio="Exploring the skies through aerospace research and two Space Shuttle missions."
			className="max-w-sm"
			description="Astronaut & aerospace engineer"
			metadata="STS-87 · STS-107"
			name={PROFILE_NAME}
		/>
	);
}

import { Badge } from "@/components/ui/badge";
import { ProfileCard } from "@/components/blobz/profile-card";

export function ProfileCardFeaturedExample() {
	return (
		<ProfileCard
			avatar={{
				name: "Janaki Ammal",
				palette: ["#e7f4ea", "#8aca9a"],
			}}
			badge={<Badge variant="outline">Research</Badge>}
			bio="A botanist and cytogeneticist whose work opened new perspectives on the plants around us."
			className="max-w-sm"
			description="A life of curiosity"
			metadata="Botany · Cytogenetics"
			name={"Janaki Ammal"}
			variant="featured"
		/>
	);
}