Staaarter

Hours & Contact Info

Weekly schedule table with today highlighted, holiday notice alert, phone/email buttons, and live chat. Perfect for restaurant contact pages and business hours display.

By Staaarter Team
Food
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/hours-and-contact-info.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food28.tsx instead.

Usage

The file also exports food28Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Food28, food28Demo } from "@/components/blocks/food/food28";

export default function Page() {
  return <Food28 {...food28Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNode"Hours & Contact"Section heading.
descriptionstringundefinedSection intro text.
hoursDayHours[]noneOne row per day, in display order.
todayIndexnumber2Static index into `hours` to visually mark as "Today" (a badge plus a tinted row). Caller-supplied, never derived from the real clock, so static rendering and every repeated card-thumbnail render stay identical.
holidayNotice{ title: string; description: string }undefinedOptional callout above the table; omitted entirely when unset.
phonestringnoneDisplay phone number, also used to build the default `tel:` href.
phoneHrefstring`tel:${phone}`Override for the call button's href.
emailstringnoneDisplay email address, also used to build the default `mailto:` href.
emailHrefstring`mailto:${email}`Override for the email button's href.
chatLabelstring"Start live chat"Label for the decorative live-chat button.
classNamestringnoneExtra classes for the outer section element.

Types

type DayHours = {
  day: string;
  open: string;
  close: string;
  closed?: boolean;
};

Behavior notes

  • "Today" is entirely prop-driven via todayIndex; there is no `new Date()`/`Date.now()` in the render path, since this block is statically rendered once at build time and re-rendered live in every card thumbnail - a real clock read would make it inconsistent across those renders.
  • The live-chat button is decorative only: a plain `type="button"` element with no click handler and no real chat widget behind it, same as this repo's other inert CTA buttons.
  • The call and email buttons are real links (`tel:`/`mailto:` hrefs via `render={<a />}`), not just decorative.
  • The holiday notice is a hand-rolled callout (icon + title + description) using semantic tokens, not the shared `Alert` primitive, since `alert` isn't one of the block system's installable dependency names.