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"

interface TimeSlot {
  time: string
  available: boolean
}

function TimeSlotPicker({
  slots,
  selected,
  onSelect,
  className,
  ...props
}: {
  slots: TimeSlot[]
  selected?: string
  onSelect: (time: string) => void
} & Omit<React.ComponentProps<"div">, "onSelect">) {
  return (
    <div
      data-slot="time-slot-picker" data-portal="https://design.nyuchi.com/components/time-slot-picker"
      className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none "grid grid-cols-3 gap-2 sm:grid-cols-4", className)}
      role="listbox"
      aria-label="Available time slots"
      {...props}
    >
      {slots.map((slot) => {
        const isSelected = slot.time === selected
        return (
          <button
            key={slot.time}
            type="button"
            role="option"
            aria-selected={isSelected}
            disabled={!slot.available}
            onClick={() => slot.available && onSelect(slot.time)}
            className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none 
              "inline-flex h-10 items-center justify-center rounded-[var(--radius-lg,14px)] text-sm font-medium tabular-nums transition-colors",
              isSelected
                ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white"
                : slot.available
                  ? "border border-border bg-input/30 text-foreground hover:bg-input/50"
                  : "cursor-not-allowed bg-muted text-muted-foreground opacity-50"
            )}
          >
            {slot.time}
          </button>
        )
      })}
    </div>
  )
}

export { TimeSlotPicker, type TimeSlot }

Source Code

View the full component source code below.

"use client"

import * as React from "react"

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

interface TimeSlot {
  time: string
  available: boolean
}

function TimeSlotPicker({
  slots,
  selected,
  onSelect,
  className,
  ...props
}: {
  slots: TimeSlot[]
  selected?: string
  onSelect: (time: string) => void
} & Omit<React.ComponentProps<"div">, "onSelect">) {
  return (
    <div
      data-slot="time-slot-picker" data-portal="https://design.nyuchi.com/components/time-slot-picker"
      className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none "grid grid-cols-3 gap-2 sm:grid-cols-4", className)}
      role="listbox"
      aria-label="Available time slots"
      {...props}
    >
      {slots.map((slot) => {
        const isSelected = slot.time === selected
        return (
          <button
            key={slot.time}
            type="button"
            role="option"
            aria-selected={isSelected}
            disabled={!slot.available}
            onClick={() => slot.available && onSelect(slot.time)}
            className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none 
              "inline-flex h-10 items-center justify-center rounded-[var(--radius-lg,14px)] text-sm font-medium tabular-nums transition-colors",
              isSelected
                ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white"
                : slot.available
                  ? "border border-border bg-input/30 text-foreground hover:bg-input/50"
                  : "cursor-not-allowed bg-muted text-muted-foreground opacity-50"
            )}
          >
            {slot.time}
          </button>
        )
      })}
    </div>
  )
}

export { TimeSlotPicker, type TimeSlot }