refactor: 📝 Rewrite Signatures, specify "Working Draft 4" label

This commit is contained in:
Jesse Wierzbinski 2024-08-03 00:09:36 +02:00
parent 84d5d04696
commit b0f807e2fe
No known key found for this signature in database
4 changed files with 32 additions and 48 deletions

View file

@ -51,7 +51,7 @@ export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
ref={ref}
className={clsx(
className,
"fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
"fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-2 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
!isInsideMobileNavigation &&
"backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur",
isInsideMobileNavigation
@ -86,10 +86,6 @@ export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
>
<ul className="flex items-center gap-8">
<TopLevelNavItem href="/">API</TopLevelNavItem>
<TopLevelNavItem href="#">
Documentation
</TopLevelNavItem>
<TopLevelNavItem href="#">Support</TopLevelNavItem>
</ul>
</nav>
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
@ -97,8 +93,8 @@ export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
<MobileSearch />
<ThemeToggle />
</div>
<div className="hidden min-[416px]:contents">
<Button href="#">Sign in</Button>
<div className="hidden min-[500px]:contents">
<Button href="#">Working Draft 4</Button>
</div>
</div>
</motion.div>

View file

@ -2,11 +2,18 @@
import { Icon } from "@iconify-icon/react/dist/iconify.mjs";
import { motion } from "framer-motion";
import { type ReactNode, useState } from "react";
import { type HTMLAttributes, type ReactNode, useState } from "react";
export function Badge({ children }: { children: ReactNode }) {
export function Badge({
children,
className,
...props
}: HTMLAttributes<HTMLSpanElement>) {
return (
<span className="inline-flex items-center rounded-md bg-brand-50 px-2 py-0 text-xs font-medium text-brand-700 ring-1 ring-inset ring-brand-500/10 dark:bg-brand-500/10 dark:text-brand-100 dark:ring-brand-200/20 h-8">
<span
className={`inline-flex items-center justify-center rounded-md bg-brand-50 px-2 py-0 text-xs font-medium text-brand-700 ring-1 ring-inset ring-brand-500/10 dark:bg-brand-500/10 dark:text-brand-100 dark:ring-brand-200/20 h-8${className ? ` ${className}` : ""}`}
{...props}
>
{children}
</span>
);

View file

@ -282,7 +282,6 @@ export function Navigation(props: ComponentPropsWithoutRef<"nav">) {
<nav {...props} aria-label="Side navigation">
<ul>
<TopLevelNavItem href="/">API</TopLevelNavItem>
<TopLevelNavItem href="#">Support</TopLevelNavItem>
{navigation.map((group, groupIndex) => (
<NavigationGroup
key={group.title}
@ -292,7 +291,7 @@ export function Navigation(props: ComponentPropsWithoutRef<"nav">) {
))}
<li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
<Button href="#" variant="filled" className="w-full">
Sign in
Working Draft 4
</Button>
</li>
</ul>