ComponentsSite blocks

Map & opening hours

Address, map, hours and directions — the most visited section of restaurant, spa and clinic sites, and the source of LocalBusiness SEO. The map is a ConsentGate facade (a greyscale static image with an accent pin; the keyless Google Maps or OpenStreetMap iframe loads after a click or functional consent — no Maps JS API, no key). Hours run through the OpeningHours module: IANA time zone, ranges past midnight, special days, Intl weekday names, week start and 12/24 h. “Open now” is a ~1 KB island that renders nothing without JS, so a cached page never shows a stale status.

Intl.DateTimeFormat (time zones) blocks/site/map-hours.tsx, blocks/site/shared/opening-hours.ts, blocks/site/shared/open-now.tsx, blocks/site/shared/consent-gate.tsx, blocks/site/registry-2.ts, styles/blocks.csstheme · material · accent · density · font

The map loads from Google Maps, which may set cookies.

Visit

Find us

Bağdat Caddesi 41234728 Caddebostan/Kadıköyİstanbul

Valet from 18:00. The closest ferry pier is Caddebostan, a seven-minute walk.

+90 216 000 00 00

Opening hours

Opening hours, Kıyı Meyhane
Sunday12 PM–10 PM
MondayClosed
Tuesday5 PM–11:30 PM
Wednesday5 PM–11:30 PM
ThursdayToday5 PM–11:30 PM
Friday5 PM–1 AM
Saturday12 PM–1 AM

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { MapHours, isOpenAt, hoursStatus } from "@vamos-ui/react/blocks";

const hours = { timeZone: "Europe/Istanbul", weekly: { fri: [{ open: "17:00", close: "01:00" }] },
  special: [{ date: "2027-01-01", closed: true, note: "New Year’s Day" }] };

<MapHours title="Find *us*" businessType="Restaurant" directions={["google", "apple", "yandex"]}
  branches={[{ name: "Kıyı Meyhane", address, phone: "+902160000000", hours, mapImage }]} />

isOpenAt(hours, new Date());               // past midnight + special days, in Europe/Istanbul
hoursStatus(hours).closesAt;               // "01:00"

Examples

Info (no map)

Address / Hours / Contact in three typographic columns; consecutive days with the same hours are grouped.

Opening hours

Address

Bağdat Caddesi 41234728 Caddebostan/Kadıköyİstanbul

Valet from 18:00. The closest ferry pier is Caddebostan, a seven-minute walk.

Directions in Google Maps (opens in a new tab)

Hours

  • Sun12 PM–10 PM
  • MonClosed
  • Tue–Thu5 PM–11:30 PM
  • Fri5 PM–1 AM
  • Sat12 PM–1 AM

Branches (three-branch clinic)

A radio location picker with open/closed per branch; the selected branch's map, address and hours (0 JS).

Locations

Three clinics, one team

Choose a location

The map loads from Google Maps, which may set cookies.

Defne Clinic Nişantaşı

Abdi İpekçi Caddesi 21, Kat 334367 Nişantaşı/Şişliİstanbul

Entrance next to the pharmacy; lift to the third floor.

+90 212 230 44 55
Opening hours, Defne Clinic Nişantaşı
SundayClosed
Monday9 AM–1 PM, 2 PM–7 PM
Tuesday9 AM–1 PM, 2 PM–7 PM
Wednesday9 AM–1 PM, 2 PM–7 PM
ThursdayToday9 AM–1 PM, 2 PM–7 PM
Friday9 AM–1 PM, 2 PM–5 PM
Saturday10 AM–2 PM

The map loads from Google Maps, which may set cookies.

Defne Clinic Moda

Moda Caddesi 8834710 Moda/Kadıköyİstanbul
+90 216 338 00 11
Opening hours, Defne Clinic Moda
SundayClosed
Monday9 AM–1 PM, 2 PM–7 PM
Tuesday9 AM–1 PM, 2 PM–7 PM
Wednesday9 AM–1 PM, 2 PM–7 PM
ThursdayToday9 AM–1 PM, 2 PM–7 PM
Friday9 AM–1 PM, 2 PM–5 PM
Saturday10 AM–2 PM

The map loads from Google Maps, which may set cookies.

Defne Clinic Ataşehir

Barbaros Mahallesi, Ardıç Sokak 534746 Ataşehir/Ataşehirİstanbul

Free parking under the building, level −1.

+90 216 555 77 88
Opening hours, Defne Clinic Ataşehir
SundayClosed
Monday9 AM–1 PM, 2 PM–7 PM
Tuesday9 AM–1 PM, 2 PM–7 PM
Wednesday9 AM–1 PM, 2 PM–7 PM
ThursdayToday9 AM–1 PM, 2 PM–7 PM
Friday9 AM–1 PM, 2 PM–5 PM
SaturdayClosed

Special days, past midnight, Turkish

New Year's Eve overrides Thursday with 19:00–03:00; Monday-first, 24-hour, Turkish weekday names.

Yılbaşı saatleri

Adres

Bağdat Caddesi 41234728 Caddebostan/Kadıköyİstanbul

Valet from 18:00. The closest ferry pier is Caddebostan, a seven-minute walk.

Yandex Maps ile yol tarifi (opens in a new tab)

Çalışma saatleri

  • PztKapalı
  • Sal–Per17:00–23:30
  • Cum17:00–01:00
  • Cmt12:00–01:00
  • Paz12:00–22:00

API

MapHours

PropTypeDefault
variant
No map image falls back to info; one branch falls back to map-split.
"map-split" | "info" | "branches""map-split"
branches
{ name, address: AddressValue, phone?, email?, hours: OpeningHours, mapImage?, placeUrl?, mapEmbedUrl?, notes? } — 1–12.
Branch[]—
businessType
JSON-LD @type.
"LocalBusiness" | "Restaurant" | "DaySpa" | "BeautySalon" | "MedicalClinic" | "ProfessionalService""LocalBusiness"
mapProvider
Embed loaded by the facade (osm needs geo).
"google" | "osm" | "none""google"
directions
Direction links (Yandex is common in Turkey).
("google" | "apple" | "yandex" | "waze")[]["google","apple"]
showOpenNow
The client-side status island.
booleantrue
now
Pin the clock (previews, tests). Default: render time for the table, live clock for the island.
string (ISO)—
eyebrow / title / lead
Section header.
ReactNode—
labels / locale
Status line keys: openNow (“Open”), openUntil (“until {time}”), closingSoon + closingSoonUntil (“open until {time}”), openAllDay, closed / closedToday, opensTodayAt / opensTomorrowAt / opensAt ({day}). TR templates get {timeTo} / {timeAt} with the right suffix (“01:00’e kadar”, “yarın 12:00’de açılıyor”). Also Load map, Directions…
Partial<Site2Labels> / string—
theme / anchor / id / className / headingLevel / components / editMode
Shared block props.
BlockBaseProps—

OpeningHours helpers

PropTypeDefault
isOpenAt(hours, at?)
Open at an instant, computed in hours.timeZone.
boolean—
hoursStatus(hours, at?, { soonMinutes })
{ state: open | closing-soon | closed, closesAt, opensAt: { time, weekday, dayOffset }, allDay, special }.
OpenStatus—
weekRows(hours, { locale, at })
Seven rows in locale order with today and special-day notes.
WeekRow[]—
summarizeHours / formatTime / formatRange / weekStartOf / orderedWeek
Intl-based formatting.
functions—
openingHoursJsonLd(hours) / localBusinessJsonLd(props)
schema.org nodes without the renderer.
object[]—

HoursTable / OpenNow

PropTypeDefault
hours / labels / locale / now
The table and the island on their own (e.g. in a footer).
——