ExploreComponents 3D architecture Observability

DocumentationDocs home Installation CLI Theming API reference Contributing

DeveloperRegistry API OpenAPI MCP server

nyuchimzizi

Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.

mukoko — consumermukoko.com weather news lingo nhimbe shamwari

nyuchi — enterprisenyuchi.com bushtrade

Built by Nyuchi Africav4.0.39

Source Code

View the full component source code below.

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

type MineralColor = "cobalt" | "tanzanite" | "malachite" | "gold" | "terracotta"

interface CategoryItem {
  name: string
  icon?: React.ReactNode
  count?: number
  href?: string
  mineral?: MineralColor
}

interface CategoryBrowserProps extends Omit<React.ComponentProps<"div">, "onSelect"> {
  categories: CategoryItem[]
  onSelect?: (name: string) => void
}

const MINERAL_STYLES: Record<MineralColor, { bg: string; text: string; border: string }> = {
  cobalt: {
    bg: "bg-mineral-cobalt/10 dark:bg-mineral-cobalt/20",
    text: "text-mineral-cobalt",
    border: "border-mineral-cobalt/20",
  },
  tanzanite: {
    bg: "bg-mineral-tanzanite/10 dark:bg-mineral-tanzanite/20",
    text: "text-mineral-tanzanite",
    border: "border-mineral-tanzanite/20",
  },
  malachite: {
    bg: "bg-mineral-malachite/10 dark:bg-mineral-malachite/20",
    text: "text-mineral-malachite",
    border: "border-mineral-malachite/20",
  },
  gold: {
    bg: "bg-mineral-gold/10 dark:bg-mineral-gold/20",
    text: "text-mineral-gold",
    border: "border-mineral-gold/20",
  },
  terracotta: {
    bg: "bg-mineral-terracotta/10 dark:bg-mineral-terracotta/20",
    text: "text-mineral-terracotta",
    border: "border-mineral-terracotta/20",
  },
}

function CategoryBrowser({ className, categories, onSelect, ...props }: CategoryBrowserProps) {
  return (
    <div
      data-slot="category-browser" data-portal="https://design.nyuchi.com/components/category-browser" role="navigation" aria-label="Categories"
      className={cn("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", className)}
      {...props}
    >
      {categories.map((category) => {
        const mineral = category.mineral ?? "cobalt"
        const styles = MINERAL_STYLES[mineral]
        const Comp = category.href ? "a" : "button"

        return (
          <Comp
            key={category.name}
            data-slot="category-card"
            className={cn(
              "flex flex-col items-center gap-2 rounded-[var(--radius-xl,17px)] border p-4 text-center transition-all hover:shadow-sm",
              styles.bg,
              styles.border
            )}
            {...(category.href
              ? { href: category.href }
              : { type: "button" as const, onClick: () => onSelect?.(category.name) })}
          >
            {category.icon && <div className={cn("text-2xl", styles.text)}>{category.icon}</div>}
            <span className="text-sm font-medium">{category.name}</span>
            {category.count !== undefined && (
              <span className={cn("text-xs font-medium", styles.text)}>{category.count}</span>
            )}
          </Comp>
        )
      })}
    </div>
  )
}

export { CategoryBrowser, type CategoryItem, type CategoryBrowserProps, type MineralColor }

Source Code

View the full component source code below.

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

type MineralColor = "cobalt" | "tanzanite" | "malachite" | "gold" | "terracotta"

interface CategoryItem {
  name: string
  icon?: React.ReactNode
  count?: number
  href?: string
  mineral?: MineralColor
}

interface CategoryBrowserProps extends Omit<React.ComponentProps<"div">, "onSelect"> {
  categories: CategoryItem[]
  onSelect?: (name: string) => void
}

const MINERAL_STYLES: Record<MineralColor, { bg: string; text: string; border: string }> = {
  cobalt: {
    bg: "bg-mineral-cobalt/10 dark:bg-mineral-cobalt/20",
    text: "text-mineral-cobalt",
    border: "border-mineral-cobalt/20",
  },
  tanzanite: {
    bg: "bg-mineral-tanzanite/10 dark:bg-mineral-tanzanite/20",
    text: "text-mineral-tanzanite",
    border: "border-mineral-tanzanite/20",
  },
  malachite: {
    bg: "bg-mineral-malachite/10 dark:bg-mineral-malachite/20",
    text: "text-mineral-malachite",
    border: "border-mineral-malachite/20",
  },
  gold: {
    bg: "bg-mineral-gold/10 dark:bg-mineral-gold/20",
    text: "text-mineral-gold",
    border: "border-mineral-gold/20",
  },
  terracotta: {
    bg: "bg-mineral-terracotta/10 dark:bg-mineral-terracotta/20",
    text: "text-mineral-terracotta",
    border: "border-mineral-terracotta/20",
  },
}

function CategoryBrowser({ className, categories, onSelect, ...props }: CategoryBrowserProps) {
  return (
    <div
      data-slot="category-browser" data-portal="https://design.nyuchi.com/components/category-browser" role="navigation" aria-label="Categories"
      className={cn("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", className)}
      {...props}
    >
      {categories.map((category) => {
        const mineral = category.mineral ?? "cobalt"
        const styles = MINERAL_STYLES[mineral]
        const Comp = category.href ? "a" : "button"

        return (
          <Comp
            key={category.name}
            data-slot="category-card"
            className={cn(
              "flex flex-col items-center gap-2 rounded-[var(--radius-xl,17px)] border p-4 text-center transition-all hover:shadow-sm",
              styles.bg,
              styles.border
            )}
            {...(category.href
              ? { href: category.href }
              : { type: "button" as const, onClick: () => onSelect?.(category.name) })}
          >
            {category.icon && <div className={cn("text-2xl", styles.text)}>{category.icon}</div>}
            <span className="text-sm font-medium">{category.name}</span>
            {category.count !== undefined && (
              <span className={cn("text-xs font-medium", styles.text)}>{category.count}</span>
            )}
          </Comp>
        )
      })}
    </div>
  )
}

export { CategoryBrowser, type CategoryItem, type CategoryBrowserProps, type MineralColor }