Apotheke Website Sections

Für Apotheken. Öffnungszeiten mit Live-Status, der Notdienst nach Datum auf einer gezeichneten Karte, Reservierung zur Abholung, Beratungstermine und eine Checkliste für die Reiseapotheke.

5 Variants

Kategorie wechseln

Geöffnet, im Notdienst und bereit zur Abholung

Die meisten Besuche auf einer Apotheken-Website sind kurz und dringend, ist geöffnet, wer hat heute Notdienst, kann ich mein Medikament vorbestellen. Diese Sections antworten sofort, mit Live-Status, Notdienst nach Datum und einer Vorbestellung, die mit einem Abholcode endet. Beratung und Reiseapotheke holen Menschen auch für mehr als ein Rezept in die Apotheke.

„Öffnungszeiten“ zeigt, ob die Apotheke geöffnet hat und bis wann, mit der Woche auf einer Zeitachse und markiertem Heute. „Notdienst“ listet die diensthabenden Apotheken zum gewählten Datum nach Entfernung, mit Anruf und Route und ihren Pins auf einer gezeichneten Karte. Die „Vorbestellung“ nimmt E-Rezept, Papierrezept und freie Produkte mit Packungen und Abholzeit auf und endet mit einem Code. „Beratung“ listet Themen mit Dauer und Preis und bucht einen Termin. „Reiseapotheke“ stellt eine Checkliste nach Reiseart zusammen, die eine gezeichnete Tasche füllt und sich drucken lässt.

Halte den Öffnungsstatus oben auf jeder Seite, er ist die häufigste Frage. Verlinke den Notdienst direkt aus dem Status, sobald die Apotheke schließt. Die Vorbestellung erspart Kunden einen zweiten Weg, erwähne sie auf der Tüte und an der Kasse.

ÖffnungszeitenNeu in 1.2

Nach dem Laden zeigt der Status, ob geöffnet ist und bis wann, mit pulsierendem Punkt. Die Woche liegt auf einer Zeitachse, deren Balken beim Scrollen wachsen, heute trägt eine Marke für die aktuelle Uhrzeit.

Installv1.0.0

aiw add @ai-website/pharmacy

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Pharmacy variant="opening-hours" hours={[{ day: 0, from: "08:00", to: "18:30" }]} phone="…" address="…" services={[{ label, icon }]} media={<img … />} dutyHref="#duty" />

Source

NotdienstNeu in 1.2

Ein Datum auf der Leiste wählen, die Notdienst-Apotheken gleiten nach Entfernung sortiert herein, mit Zeiten, Anruf und Route. Ihre Nadeln fallen beim Scrollen auf eine gezeichnete Karte, die gewählte wächst im Akzent.

Installv1.0.0

aiw add @ai-website/pharmacy

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Pharmacy variant="emergency-duty" duty={[{ date: "2026-10-26", pharmacies: [{ id, name, address, phone, distance, x, y, from: "08:30", to: "08:30" }] }]} dutyFee={2.5} />

Source

VorbestellungNeu in 1.2

E-Rezept, Papierrezept oder Produkte ohne Rezept, die Felder wechseln mit weicher Unschärfe. Produkte mit Packungen hinzufügen, eine Abholzeit wählen, das Formular nennt jedes fehlende Feld und endet mit einem Abholcode.

Installv1.0.0

aiw add @ai-website/pharmacy

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Pharmacy variant="reservation" pickupDays={[{ id, label, times: ["16:00"] }]} steps={[{ title, text, icon }]} onReserve={(data) => …} />

Source

BeratungNeu in 1.2

Themen steigen nacheinander auf, mit Dauer und Preis, das Symbol neigt sich beim Zeigen. Ein Thema wählen, und was mitzubringen ist, Termine und Uhrzeiten wechseln herein, gebucht wird mit Name und Telefon.

Installv1.0.0

aiw add @ai-website/pharmacy

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Pharmacy variant="consultation" consultations={[{ id, title, text, icon, duration, price, bring: [], slots: [{ date, times: [] }] }]} onBook={(data) => …} />

Source

ReiseapothekeNeu in 1.2

Die Art der Reise wählen, die Checkliste ordnet sich nach Gruppen neu und steigt auf. Jeder Haken springt und füllt die gezeichnete Tasche und den Balken, eine volle Liste meldet sich in Grün. Drucken oder Beratung buchen.

Installv1.0.0

aiw add @ai-website/pharmacy

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Pharmacy variant="travel-kit" trips={[{ id, label, icon }]} kit={[{ id, label, group, trips: ["beach"], note }]} adviceHref="#" />

Source

Details

Was Apotheke mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.2.0
Datei: components/ui/pharmacy.tsx
Bringt mit: utilskitbutton iconsectionmotioninput
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 76 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle PharmacyProps aus components/ui/pharmacy.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
PharmacyVariant
opening-hoursemergency-dutyreservationconsultationtravel-kit
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
hoursoptional
PharmacyHours[]
opening-hours
servicesoptional
PharmacyService[]
phoneoptional
string
addressoptional
string
mediaoptional
React.ReactNode
opening-hours: a photo of the pharmacy
dutyHrefoptional
string
opening-hours: link to the emergency service
nowoptional
{ day: number; time: string }
Fixed clock for previews: day 0 is Monday, time HH:MM. Without it the visitor's clock is used after loading.
dutyoptional
PharmacyDutyDay[]
emergency-duty
dutyFeeoptional
number
emergency-duty: the emergency fee
pickupDaysoptional
PharmacyPickupDay[]
reservation
stepsoptional
{ title: string; text?: string; icon?: IconName }[]
reservation: steps shown next to the form
onReserveoptional
(data: { kind: string; code: string; items: { name: string; qty: number }[]; day: string; time: string; name: string; phone: string; note: string }) => void
consultationsoptional
PharmacyConsultation[]
consultation
onBookoptional
(data: { topic: string; date: string; time: string; name: string; phone: string }) => void
tripsoptional
PharmacyTrip[]
travel-kit
kitoptional
PharmacyKitItem[]
adviceHrefoptional
string
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Apotheke selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 76 Texte anzeigen

Schlüssel	Englisch	Deutsch
days	Englisch Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday	Deutsch Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
daysShort	Englisch Mon,Tue,Wed,Thu,Fri,Sat,Sun	Deutsch Mo,Di,Mi,Do,Fr,Sa,So
hours	Englisch Opening hours	Deutsch Öffnungszeiten
openNow	Englisch Open now	Deutsch Jetzt geöffnet
closedNow	Englisch Closed right now	Deutsch Gerade geschlossen
untilTime	Englisch until {time}	Deutsch bis {time} Uhr
breakUntil	Englisch Lunch break until {time}	Deutsch Mittagspause bis {time} Uhr
opensToday	Englisch Opens today at {time}	Deutsch Öffnet heute um {time} Uhr
opensTomorrow	Englisch Opens tomorrow at {time}	Deutsch Öffnet morgen um {time} Uhr
opensDay	Englisch Opens {day} at {time}	Deutsch Öffnet {day} um {time} Uhr
today	Englisch Today	Deutsch Heute
closed	Englisch Closed	Deutsch Geschlossen
to	Englisch to	Deutsch bis
call	Englisch Call {phone}	Deutsch {phone} anrufen
duty	Englisch Find the pharmacy on duty	Deutsch Notdienst-Apotheke finden
dutyHint	Englisch Outside our hours a pharmacy nearby is always on duty.	Deutsch Außerhalb unserer Zeiten hat immer eine Apotheke in der Nähe Notdienst.
services	Englisch In the pharmacy	Deutsch In der Apotheke
dutyDate	Englisch Date of the emergency service	Deutsch Datum des Notdienstes
onDuty	Englisch On duty	Deutsch Notdienst
nextDay	Englisch next day	Deutsch Folgetag
km	Englisch {n} km	Deutsch {n} km
route	Englisch Route	Deutsch Route
callShort	Englisch Call	Deutsch Anrufen
you	Englisch You are here	Deutsch Du bist hier
select	Englisch Show {name} on the map	Deutsch {name} auf der Karte zeigen
fee	Englisch A fee of {fee} applies during emergency hours.	Deutsch Im Notdienst fällt eine Gebühr von {fee} an.
noDuty	Englisch No pharmacy on duty is listed for this day.	Deutsch Für diesen Tag ist keine Notdienst-Apotheke eingetragen.
what	Englisch What would you like to reserve?	Deutsch Was möchtest du reservieren?
ePrescription	Englisch E-prescription	Deutsch E-Rezept
ePrescriptionText	Englisch Send the code, we prepare everything.	Deutsch Code schicken, wir legen alles bereit.
paper	Englisch Paper prescription	Deutsch Papierrezept
paperText	Englisch Bring it along when you collect.	Deutsch Bring es zur Abholung mit.
otc	Englisch Without prescription	Deutsch Ohne Rezept
otcText	Englisch Products from the shelf or the counter.	Deutsch Aus der Freiwahl oder vom Tresen.
code	Englisch Prescription code	Deutsch Rezeptcode
codeHint	Englisch The code from your app or the printout	Deutsch Der Code aus der App oder vom Ausdruck
items	Englisch Products	Deutsch Produkte
itemLabel	Englisch Product or active ingredient {n}	Deutsch Produkt oder Wirkstoff {n}
itemPlaceholder	Englisch e.g. Ibuprofen 400, 20 tablets	Deutsch z. B. Ibuprofen 400, 20 Tabletten
qty	Englisch Packs	Deutsch Packungen
less	Englisch One pack less	Deutsch Eine Packung weniger
more	Englisch One pack more	Deutsch Eine Packung mehr
addItem	Englisch Add a product	Deutsch Produkt hinzufügen
removeItem	Englisch Remove product {n}	Deutsch Produkt {n} entfernen
pickup	Englisch Pick up	Deutsch Abholung
pickupDay	Englisch Day	Deutsch Tag
pickupTime	Englisch Time	Deutsch Uhrzeit
name	Englisch Name	Deutsch Name
phone	Englisch Phone	Deutsch Telefon
note	Englisch Note for the team	Deutsch Hinweis an das Team
reserve	Englisch Reserve for pick up	Deutsch Zur Abholung reservieren
errName	Englisch Please enter your name.	Deutsch Bitte gib deinen Namen an.
errPhone	Englisch Please enter a phone number so we can reach you.	Deutsch Bitte gib eine Telefonnummer an, damit wir dich erreichen.
errItem	Englisch Please name at least one product.	Deutsch Bitte nenne mindestens ein Produkt.
errCode	Englisch Please enter the prescription code.	Deutsch Bitte gib den Rezeptcode ein.
errTime	Englisch Please pick a time.	Deutsch Bitte wähle eine Uhrzeit.
reserved	Englisch Reserved. We call you if anything changes.	Deutsch Reserviert. Wir rufen an, falls sich etwas ändert.
pickupCode	Englisch Your pick up code	Deutsch Dein Abholcode
pickupAt	Englisch Ready {day} from {time}	Deutsch Liegt bereit {day} ab {time} Uhr
again	Englisch Start a new reservation	Deutsch Neue Reservierung starten
howTitle	Englisch How it works	Deutsch So läuft es
topics	Englisch Consultation topics	Deutsch Beratungsthemen
free	Englisch Free	Deutsch Kostenlos
min	Englisch {n} min	Deutsch {n} Min.
bring	Englisch Please bring	Deutsch Bitte mitbringen
date	Englisch Date	Deutsch Datum
time	Englisch Time	Deutsch Uhrzeit
book	Englisch Book {topic}	Deutsch {topic} buchen
booked	Englisch Booked for {date} at {time}. We look forward to seeing you.	Deutsch Gebucht für {date} um {time} Uhr. Wir freuen uns auf dich.
newBooking	Englisch Book another topic	Deutsch Weiteres Thema buchen
trip	Englisch Kind of trip	Deutsch Art der Reise
packed	Englisch {n} of {total} packed	Deutsch {n} von {total} eingepackt
packedAll	Englisch All packed. Have a good trip.	Deutsch Alles eingepackt. Gute Reise.
print	Englisch Print the list	Deutsch Liste drucken
kitNote	Englisch Medicines you take regularly and vaccinations are best discussed in person.	Deutsch Dauermedikamente und Impfungen besprechen wir am besten persönlich.
advice	Englisch Book a consultation	Deutsch Beratung buchen

Aus dem Quellcode der Component abgeleitet.

Apotheke reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-invalid, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert, group, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Apotheke?

Mit aiw add @ai-website/pharmacy. Der Befehl legt die Datei components/ui/pharmacy.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion und input. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Apotheke?

5 Varianten, Öffnungszeiten, Notdienst, Vorbestellung, Beratung und Reiseapotheke. Du wählst sie mit der Prop variant, zum Beispiel variant="emergency-duty".

Kann ich die Texte von Apotheke übersetzen?

Ja. Apotheke bringt 76 eigene Texte auf Deutsch und Englisch mit, etwa „Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag“, „Mo,Di,Mi,Do,Fr,Sa,So“ und „Öffnungszeiten“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Apotheke einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Apotheke mit aiw_components und installieren sie mit aiw_add @ai-website/pharmacy. Nenn im Prompt die Variante, etwa variant="opening-hours", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Apotheke stehen.

Geöffnet, im Notdienst und bereit zur Abholung

Apotheke

ÖffnungszeitenNeu in 1.2

NotdienstNeu in 1.2

VorbestellungNeu in 1.2

BeratungNeu in 1.2

ReiseapothekeNeu in 1.2

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit