@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/navbar-rounded-small/NavbarRoundedSmall.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Rounded Small.
+ *
+ * A `background` pill in the middle of the page, only as wide as what it
+ * holds: the logo, four links in `muted-foreground` with the current one in
+ * `foreground`, and a small Outline button, 10px apart. On Mobile the pill
+ * spans the width; the links and the button no longer fit in it, so they
+ * move into the Sheet.
+ *
+ * The block itself has no fill: the pill floats on the page under it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarRoundedSmallCopy {
+  /** The links, in reading order. A link with `items` opens a menu of them; the `current` one is in `foreground`. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. The menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarRoundedSmallCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "About Us", href: "/about" },
+      {
+        label: "Products",
+        href: "/products",
+        items: [
+          { label: "All products", href: "/products" },
+          { label: "New arrivals", href: "/products/new" },
+          { label: "Best sellers", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "Log in",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "من نحن", href: "/about" },
+      {
+        label: "المنتجات",
+        href: "/products",
+        items: [
+          { label: "كل المنتجات", href: "/products" },
+          { label: "وصل حديثًا", href: "/products/new" },
+          { label: "الأكثر مبيعًا", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "تسجيل الدخول",
+  },
+}
+
+export interface NavbarRoundedSmallProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarRoundedSmallCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Called when the button is pressed, in the bar or in the Sheet. */
+  onCtaClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarRoundedSmall({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarRoundedSmallProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const cta = ctaLabel ?? copy.ctaLabel
+
+  return (
+    <header className={cn("flex justify-center px-4 md:px-6 lg:px-8", className)} {...props}>
+      <div className="flex w-full items-center gap-2.5 rounded-full bg-background px-6 py-3 md:w-auto">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden md:block">
+          <NavbarLinks links={items} indicator="text" tone="muted" />
+        </nav>
+        <Button type="button" variant="outline" tone="primary" size="sm" onClick={onCtaClick} className="hidden md:inline-flex">
+          {cta}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+          footer={
+            <Button type="button" variant="outline" tone="primary" size="md" onClick={onCtaClick}>
+              {cta}
+            </Button>
+          }
+        />
+      </div>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarRoundedSmallCopy = COPY

package/registry/blocks/navbar-rounded-small/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarRoundedSmall,
+  navbarRoundedSmallCopy,
+  type NavbarRoundedSmallCopy,
+  type NavbarRoundedSmallProps,
+} from "./NavbarRoundedSmall"

package/registry/blocks/navbar-small/NavbarSmall.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=Small.
+ *
+ * A `card` panel hanging from the top of the page, centred and only as wide
+ * as what it holds, its bottom corners rounded (Figma `border radius/xl`,
+ * 14px): the logo, the links with a `primary` dot under the current one, and
+ * a small Outline button. On Mobile the panel spans the width; the links and
+ * the button no longer fit in it, so they move into the Sheet.
+ *
+ * The block itself has no fill: the panel sits on the page under it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarSmallCopy {
+  /** The links, in reading order. A link with `items` opens a menu of them; the `current` one has the dot. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. The menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarSmallCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      {
+        label: "Products",
+        href: "/products",
+        items: [
+          { label: "All products", href: "/products" },
+          { label: "New arrivals", href: "/products/new" },
+          { label: "Best sellers", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "Log in",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      {
+        label: "المنتجات",
+        href: "/products",
+        items: [
+          { label: "كل المنتجات", href: "/products" },
+          { label: "وصل حديثًا", href: "/products/new" },
+          { label: "الأكثر مبيعًا", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "تسجيل الدخول",
+  },
+}
+
+export interface NavbarSmallProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarSmallCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Called when the button is pressed, in the bar or in the Sheet. */
+  onCtaClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarSmall({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarSmallProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const cta = ctaLabel ?? copy.ctaLabel
+
+  return (
+    <header className={cn("flex justify-center px-4 md:px-6 lg:px-8", className)} {...props}>
+      {/* Figma `border radius/xl`: no class is 14px in both apps. */}
+      <div className="flex w-full items-center gap-6 rounded-b-[14px] bg-card p-6 text-card-foreground md:w-auto">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden md:block">
+          <NavbarLinks links={items} indicator="dot" />
+        </nav>
+        <Button type="button" variant="outline" tone="primary" size="sm" onClick={onCtaClick} className="hidden md:inline-flex">
+          {cta}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+          footer={
+            <Button type="button" variant="outline" tone="primary" size="md" onClick={onCtaClick}>
+              {cta}
+            </Button>
+          }
+        />
+      </div>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarSmallCopy = COPY

package/registry/blocks/navbar-small/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarSmall,
+  navbarSmallCopy,
+  type NavbarSmallCopy,
+  type NavbarSmallProps,
+} from "./NavbarSmall"

package/registry/blocks/navbar-with-centered-logo/NavbarWithCenteredLogo.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Search } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  NavbarAccount,
+  NavbarBar,
+  NavbarIconButton,
+  NavbarLogo,
+  NavbarMenu,
+  navbarLabels,
+  type NavbarLabels,
+  type NavbarLinkItem,
+} from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=With Centered Logo.
+ *
+ * The menu button at the start, the logo in the middle, search and the
+ * account's avatar at the end. The links live in the Sheet at every
+ * breakpoint, so nothing collapses.
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarWithCenteredLogoCopy {
+  /** The links the menu opens, in reading order. The `current` one is marked. */
+  links: NavbarLinkItem[]
+  /** The account holder's name: the avatar's alternative text, and its initials while the photo loads. */
+  accountName: string
+}
+
+/** Figma's copy, English and Arabic. The menu's links are not in Figma. */
+const COPY: Record<Locale, NavbarWithCenteredLogoCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      { label: "Products", href: "/products" },
+    ],
+    accountName: "Chris Doe",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      { label: "المنتجات", href: "/products" },
+    ],
+    accountName: "أحمد علي",
+  },
+}
+
+export interface NavbarWithCenteredLogoProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarWithCenteredLogoCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** The account photo. Without it the avatar shows the name's initials. */
+  avatar?: string
+  /** Called when the search button is pressed. */
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarWithCenteredLogo({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  accountName,
+  avatar,
+  onSearchClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarWithCenteredLogoProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="py-3" contentClassName="gap-4">
+        <NavbarMenu
+          links={links ?? copy.links}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+        />
+        <div className="flex flex-1 justify-center">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <NavbarIconButton label={l.search} icon={<Search />} onClick={onSearchClick} />
+        <NavbarAccount name={accountName ?? copy.accountName} src={avatar} />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarWithCenteredLogoCopy = COPY

package/registry/blocks/navbar-with-centered-logo/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarWithCenteredLogo,
+  navbarWithCenteredLogoCopy,
+  type NavbarWithCenteredLogoCopy,
+  type NavbarWithCenteredLogoProps,
+} from "./NavbarWithCenteredLogo"

package/registry/blocks/navbar-with-cta-button/NavbarWithCtaButton.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { NavbarBar, NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=With CTA Button.
+ *
+ * The logo, the links in the middle (the last opens a menu) and a Solid
+ * button at the end. On Mobile the links move into the Sheet; the button
+ * still fits beside the logo, so it stays.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarWithCtaButtonCopy {
+  /** The links, in reading order. A link with `items` opens a menu of them; the `current` one carries the `accent` fill. */
+  links: NavbarLinkItem[]
+  /** The button's label. */
+  ctaLabel: string
+}
+
+/** Figma's copy, English and Arabic. The menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarWithCtaButtonCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      {
+        label: "Products",
+        href: "/products",
+        items: [
+          { label: "All products", href: "/products" },
+          { label: "New arrivals", href: "/products/new" },
+          { label: "Best sellers", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "Get Started",
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      {
+        label: "المنتجات",
+        href: "/products",
+        items: [
+          { label: "كل المنتجات", href: "/products" },
+          { label: "وصل حديثًا", href: "/products/new" },
+          { label: "الأكثر مبيعًا", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+    ctaLabel: "ابدأ الآن",
+  },
+}
+
+export interface NavbarWithCtaButtonProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarWithCtaButtonCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Called when the button is pressed. */
+  onCtaClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarWithCtaButton({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  ctaLabel,
+  onCtaClick,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarWithCtaButtonProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="py-3" contentClassName="gap-4">
+        <div className="flex flex-1 md:flex-none">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden flex-1 justify-center md:flex">
+          <NavbarLinks links={items} indicator="fill" />
+        </nav>
+        <Button type="button" size="md" onClick={onCtaClick}>
+          {ctaLabel ?? copy.ctaLabel}
+        </Button>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+        />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarWithCtaButtonCopy = COPY

package/registry/blocks/navbar-with-cta-button/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarWithCtaButton,
+  navbarWithCtaButtonCopy,
+  type NavbarWithCtaButtonCopy,
+  type NavbarWithCtaButtonProps,
+} from "./NavbarWithCtaButton"

package/registry/blocks/navbar-with-dropdown/NavbarWithDropdown.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { NavbarBar, NavbarLinks, NavbarLogo, NavbarMenu, navbarLabels, type NavbarLabels, type NavbarLinkItem } from "../navbar/navbar"
+
+/*
+ * Figma: `Navbar` (4103:4910), Type=With Dropdown.
+ *
+ * Default's bar, with a chevron on the last link: it opens a Dropdown Menu of
+ * that section's pages. On Mobile the links move into the Sheet, the menu's
+ * pages listed under their link.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+type Locale = "en" | "ar"
+
+export interface NavbarWithDropdownCopy {
+  /** The links, in reading order. A link with `items` opens a menu of them; the `current` one carries the `accent` fill. */
+  links: NavbarLinkItem[]
+}
+
+/** Figma's copy, English and Arabic. The menu's pages are not in Figma. */
+const COPY: Record<Locale, NavbarWithDropdownCopy> = {
+  en: {
+    links: [
+      { label: "Home", href: "/", current: true },
+      { label: "Services", href: "/services" },
+      {
+        label: "Products",
+        href: "/products",
+        items: [
+          { label: "All products", href: "/products" },
+          { label: "New arrivals", href: "/products/new" },
+          { label: "Best sellers", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+  },
+  ar: {
+    links: [
+      { label: "الرئيسية", href: "/", current: true },
+      { label: "الخدمات", href: "/services" },
+      {
+        label: "المنتجات",
+        href: "/products",
+        items: [
+          { label: "كل المنتجات", href: "/products" },
+          { label: "وصل حديثًا", href: "/products/new" },
+          { label: "الأكثر مبيعًا", href: "/products/best-sellers" },
+        ],
+      },
+    ],
+  },
+}
+
+export interface NavbarWithDropdownProps extends React.HTMLAttributes<HTMLElement>, Partial<NavbarWithDropdownCopy> {
+  /** Which language the default copy and labels are in. The page's `dir` sets the direction. */
+  locale?: Locale
+  /** Your logo, a link home: Figma shows the 34px Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Where the logo links.
+   * @default "/"
+   */
+  logoHref?: string
+  /** The names only assistive tech reads, in place of `locale`'s. */
+  labels?: Partial<NavbarLabels>
+  /** Whether the menu's Sheet is open, to control it. */
+  menuOpen?: boolean
+  /** Called when the menu's Sheet opens or closes. */
+  onMenuOpenChange?: (open: boolean) => void
+}
+
+export function NavbarWithDropdown({
+  locale = "en",
+  logo,
+  logoHref = "/",
+  labels,
+  links,
+  menuOpen,
+  onMenuOpenChange,
+  className,
+  ...props
+}: NavbarWithDropdownProps) {
+  const l = { ...navbarLabels[locale], ...labels }
+  const items = links ?? COPY[locale].links
+
+  return (
+    <header className={cn("bg-background", className)} {...props}>
+      <NavbarBar className="py-3" contentClassName="gap-6">
+        <div className="flex flex-1">
+          <NavbarLogo href={logoHref}>{logo}</NavbarLogo>
+        </div>
+        <nav aria-label={l.nav} className="hidden md:block">
+          <NavbarLinks links={items} indicator="fill" />
+        </nav>
+        <NavbarMenu
+          links={items}
+          label={l.openMenu}
+          title={l.menuTitle}
+          closeLabel={l.closeMenu}
+          open={menuOpen}
+          onOpenChange={onMenuOpenChange}
+          className="md:hidden"
+        />
+      </NavbarBar>
+    </header>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const navbarWithDropdownCopy = COPY

package/registry/blocks/navbar-with-dropdown/index.ts

@@ -0,0 +1,6 @@
+export {
+  NavbarWithDropdown,
+  navbarWithDropdownCopy,
+  type NavbarWithDropdownCopy,
+  type NavbarWithDropdownProps,
+} from "./NavbarWithDropdown"