Weingut

Für Weingüter, Winzer und Weinhandlungen. Weine mit Geschmacksprofil, die Lagen als gezeichnete Karte, Weinproben buchen, ein Karton zum Füllen und der Jahrgangsbericht.

5 Variants

Kategorie wechseln

Weinliste

Nach Stil auf Chips filtern. Gezeichnete Flaschen neigen sich beim Zeigen, die Skalen für Süße und Körper füllen sich beim Scrollen Punkt für Punkt, eine Flasche mit kleinem Sprung hinzufügen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/winery

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

Usage

<Winery variant="wine-list" wines={[{ id, name, grape, style: "white", vintage, price, sweetness: 0, body: 2, label, pairs: [{ label, icon }] }]} />

Source

Lagen

Das Weingut als gezeichneter Hang mit seinen Lagen, die Rebzeilen blenden beim Scrollen ein. Auf eine Lage zeigen oder unten wählen, Rebsorte, Boden, Ausrichtung und Alter der Reben wechseln.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/winery

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

Usage

<Winery variant="estate" parcels={[{ id, name, points: "60,150 230,95 260,170 90,230", grape, soil, aspect, age, size, text }]} />

Source

Weinproben

Ein Format wählen, seine Termine zeigen die freien Plätze, wenige werden bernsteinfarben. Gäste mit dem Zähler einstellen, der Preis auf dem Knopf gleitet mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/winery

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

Usage

<Winery variant="tasting" tastings={[{ id, title, text, duration, price, icon, dates: [{ id, label, free }] }]} />

Source

Karton zusammenstellen

Einen Wein antippen, seine Flasche fällt in einen Holzkarton. Eine Flasche im Karton antippen, um sie herauszunehmen. Ein voller Karton zeigt den Rabatt und den alten Preis durchgestrichen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/winery

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

Usage

<Winery variant="case-builder" wines={[…]} caseSize={6} caseDiscount={10} />

Source

Jahrgangsbericht

Jahrgänge als Reiter mit gleitender Linie. Sterne springen herein, Sonnenstunden und Regen zählen zu ihren Werten, ihre Balken wachsen, Lesebeginn und eine Notiz zu den Weinen folgen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/winery

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

Usage

<Winery variant="vintage" vintages={[{ year, rating, sun, rain, harvest, text }]} />

Source

Details

Was Weingut mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/winery.tsx
Bringt mit: utilskitbutton iconsectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 46 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

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

variantoptional
WineryVariant
wine-listestatetastingcase-buildervintage
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
winesoptional
Wine[]
wine-list, case-builder
parcelsoptional
WineParcel[]
estate
tastingsoptional
WineTasting[]
tasting
caseSizeoptional
number
case-builder: bottles per case and the discount for a full one
caseDiscountoptional
number
vintagesoptional
WineVintage[]
vintage
currencyoptional
string

Eingebaute Texte

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

Alle 46 Texte anzeigen

Schlüssel	Englisch	Deutsch
style	Englisch Wine style	Deutsch Weinart
vintage	Englisch Vintage	Deutsch Jahrgang
all	Englisch All	Deutsch Alle
white	Englisch White	Deutsch Weiß
red	Englisch Red	Deutsch Rot
rose	Englisch Rosé	Deutsch Rosé
sparkling	Englisch Sparkling	Deutsch Sekt
dry	Englisch Dry	Deutsch Trocken
sweet	Englisch Sweet	Deutsch Süß
light	Englisch Light	Deutsch Leicht
full	Englisch Full	Deutsch Kräftig
pairs	Englisch With	Deutsch Passt zu
add	Englisch Add {name} to the basket	Deutsch {name} in den Warenkorb
addShort	Englisch Add	Deutsch Dazu
added	Englisch Added	Deutsch Dabei
parcel	Englisch Vineyard	Deutsch Lage
grape	Englisch Grape	Deutsch Rebsorte
soil	Englisch Soil	Deutsch Boden
aspect	Englisch Facing	Deutsch Ausrichtung
age	Englisch Vines	Deutsch Reben
ageN	Englisch {n} years old	Deutsch {n} Jahre alt
size	Englisch Area	Deutsch Fläche
ha	Englisch {n} ha	Deutsch {n} ha
format	Englisch Tasting	Deutsch Probe
date	Englisch Date	Deutsch Termin
guests	Englisch Guests	Deutsch Gäste
seats	Englisch {n} seats left	Deutsch noch {n} Plätze
soldOut	Englisch Fully booked	Deutsch Ausgebucht
book	Englisch Book for {price}	Deutsch Für {price} buchen
booked	Englisch Booked. See you in the cellar.	Deutsch Gebucht. Wir sehen uns im Keller.
minus	Englisch One guest less	Deutsch Ein Gast weniger
plus	Englisch One guest more	Deutsch Ein Gast mehr
yourCase	Englisch Your case	Deutsch Dein Karton
bottles	Englisch {n} of {total} bottles	Deutsch {n} von {total} Flaschen
remove	Englisch Remove {name}	Deutsch {name} entfernen
discount	Englisch {n}% off the full case	Deutsch {n} % auf den vollen Karton
toDiscount	Englisch {n} more for {pct}% off	Deutsch Noch {n} für {pct} % Rabatt
total	Englisch Total	Deutsch Gesamt
checkout	Englisch Order the case	Deutsch Karton bestellen
empty	Englisch Add bottles from the list	Deutsch Füge Flaschen aus der Liste hinzu
rating	Englisch Rating	Deutsch Bewertung
sunHours	Englisch Sun hours	Deutsch Sonnenstunden
rainMm	Englisch Rain	Deutsch Regen
mm	Englisch {n} mm	Deutsch {n} mm
harvest	Englisch Harvest began	Deutsch Lesebeginn
shopVintage	Englisch Shop the {year} wines	Deutsch Weine aus {year} kaufen

Aus dem Quellcode der Component abgeleitet.

Weingut reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
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. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Weingut?

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

Welche Varianten hat Weingut?

5 Varianten, Weinliste, Lagen, Weinproben, Karton zusammenstellen und Jahrgangsbericht. Du wählst sie mit der Prop variant, zum Beispiel variant="estate".

Kann ich die Texte von Weingut übersetzen?

Ja. Weingut bringt 46 eigene Texte auf Deutsch und Englisch mit, etwa „Weinart“, „Jahrgang“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Weingut einbauen?

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

Kann ich Weingut ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Winery-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Weingut stehen.

Weingut

Weinliste

Lagen

Weinproben

Karton zusammenstellen

Jahrgangsbericht

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit