src/lib/components/sidebar/Sidebar.svelte

<script>
	import Icon from '@iconify/svelte';
	
	import logo from '$lib/images/hf-logo.svg';
	import ProTag from '$lib/components/ProTag.svelte';
	import PrimaryLink from '$lib/components/sidebar/links/Primary.svelte';
	import SecondaryLink from '$lib/components/sidebar/links/Secondary.svelte';

	const LINKS = [
  {
    path: "/text-generation",
    label: "Text Generation",
    description: "Generate text from a prompt, using a model of your choice.",
    icon: "heroicons:chat-bubble-left-right-20-solid",
    type: "green",
  },
  {
    path: "/image-generation",
    label: "Image Generation",
    description: "Generate images from a prompt, using a model of your choice.",
    icon: "ph:images-square-fill",
    type: "pink",
  },
];

const FEW_SHOTS = [
  {
    path: "/text-generation/translation",
    label: "Translation",
    icon: "bi:translate",
  },
  {
    path: "/text-generation/chat",
    label: "Chat",
    icon: "ph:chat-dots-fill",
  },
];

</script>

<aside class="hidden xl:block bg-slate-900 w-full max-w-[360px] h-screen border-r border-slate-800 text-white">
	<header class="flex items-center justify-start p-8 gap-4">
		<img src={logo} alt="Logo" width={34} height={34} />
		<div class="flex items-center justify-start gap-2">
			<p class="text-white font-bold text-xl">Inference API for</p>
			<ProTag />
		</div>
	</header>
	<nav class="grid grid-cols-1 gap-8 px-4">
		<a
			href="https://huggingface.co/pricing#pro"
			target="_blank"
			class="px-4"
		>
			<button class="group text-base font-bold uppercase tracking-wide bg-white text-slate-950 transition-all duration-200 px-6 py-3 w-full rounded-full relative">
				Subscribe to Pro
			</button>
		</a>
		<ul class="grid grid-cols-1 gap-4">
			{#each LINKS as { path, description, label, type, icon }, i}
				<PrimaryLink href={path} type={type}>
					<div class="flex items-center justify-start gap-4">
						<Icon icon={icon} class="w-6 h-6" />
						<p class="font-semibold text-sm uppercase font-code">
							{label}
						</p>
					</div>
					<p class="text-sm mt-2 text-white/90">
						{description ||
							"Generate text from a prompt, using a model of your choice."}
					</p>
				</PrimaryLink>
				{/each}
		</ul>
		<div class="grid grid-cols-1 gap-4">
			<div class="flex items-center justify-start gap-4 mb-2">
				<p class="text-slate-600 uppercase font-medium text-sm font-sans">
					FEW SHOTS
				</p>
				<div class="w-full flex-1 h-[1px] bg-slate-800" />
			</div>
			{#each FEW_SHOTS as { path, label, icon }, i}
				<SecondaryLink href={path}>
					<Icon icon={icon} class="w-5 h-5" />
					<p class="font-semibold text-sm uppercase font-code">
						{label}
					</p>
				</SecondaryLink>
				{/each}
		</div>
	</nav>
</aside>