Storyden

import Link from "next/link"; import { Node } from "@/api/openapi-schema"; import { styled } from "@/styled-system/jsx"; export function LibraryBadge() { return ( <styled.span position="relative" backgroundColor="bg.accent" color="fg.accent" px="1" borderRadius="md" > <Link href="/l">library</Link> </styled.span> ); } export function LibraryPageBadge(props: Node) { const url = `/l/${props.slug}`; return ( <styled.span position="relative" backgroundColor="bg.accent" color="fg.accent" px="1" borderRadius="md" lineClamp="1" > <Link href={url}>{props.name}</Link> </styled.span> ); } // TODO: Make this a recipe component. export function NewBadge() { return ( <styled.span fontSize="xs" fontWeight="bold" backgroundColor="bg.accent" color="fg.accent" px="1" py="0.5" borderRadius="sm" > New </styled.span> ); }