save

v2/component-library/src/pages/configurator.tsx

@@ -9,7 +9,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
 import { Checklist } from "@/components/gebos/checklist"
 import { IconBadge } from "@/components/gebos/icon-tile"
 import { Container, Section, SectionHeading } from "@/components/gebos/section"
@@ -160,13 +160,12 @@ function ServiceOption({
  * "Nicht enthalten" instead of merely dimmed.
  */
 function PackageCard({
-  assets,
+  render,
   title,
   items,
   included,
 }: {
-  /** drawn side by side in the header, first one leading */
-  assets: RenderAsset[]
+  render: RenderAsset
   title: string
   items: string[]
   included: boolean
@@ -179,17 +178,12 @@ function PackageCard({
       )}
     >
       <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
-        <div className="flex shrink-0 items-center gap-1">
-          {assets.map((asset) => (
-            <AssetRender
-              key={asset.webp}
-              render={asset}
-              alt=""
-              className="flex size-20 items-center justify-center"
-              imgClassName={cn("w-20", !included && "opacity-40 grayscale")}
-            />
-          ))}
-        </div>
+        <AssetRender
+          render={render}
+          alt=""
+          className="flex size-20 shrink-0 items-center justify-center"
+          imgClassName={cn("w-20", !included && "opacity-40 grayscale")}
+        />
         <h3
           className={cn(
             "text-xl font-extrabold tracking-tight",
@@ -292,10 +286,6 @@ export default function ConfiguratorPage() {
   const rwmRatePerUnit = install ? RWM_ONE_TIME_INSTALLED : RWM_ONE_TIME_SELF
   /* RWM hardware is billed once per Wohnung – the estimate is the sum. */
   const rwmOneTimeTotal = rwm ? rwmRatePerUnit * totalUnits : 0
-  /* the UVI package shows the heat distribution it has to measure */
-  const heatAsset = buildings.some((b) => b.heat === "fussbodenheizung")
-    ? renders.floorHeating
-    : renders.radiator
 
   return (
     <Container>
@@ -333,22 +323,34 @@ export default function ConfiguratorPage() {
                 />
               </div>
               <Separator className="my-6" />
-              <p className="text-sm font-bold text-navy">Installation</p>
-              <Tabs
-                className="mt-3"
-                value={install ? "mit" : "ohne"}
-                onValueChange={(v) => setInstall(v === "mit")}
+              <div
+                className={cn(
+                  "flex items-start justify-between gap-4 rounded-xl border p-4 transition-colors",
+                  install
+                    ? "border-primary bg-brand-50/60 shadow-pill"
+                    : "border-border bg-card"
+                )}
               >
-                <TabsList>
-                  <TabsTrigger value="mit">Mit Installation</TabsTrigger>
-                  <TabsTrigger value="ohne">Ohne Installation</TabsTrigger>
-                </TabsList>
-              </Tabs>
-              <p className="mt-3 text-sm text-muted-foreground">
-                {install
-                  ? "GebOS organisiert die Montage – Geräte- und Monatspreise enthalten die Installation."
-                  : "Sie selbst, Ihr Hausmeister oder Ihr Fachbetrieb montiert die Geräte."}
-              </p>
+                <div className="min-w-0">
+                  <Label
+                    htmlFor="installation"
+                    className="cursor-pointer text-sm font-bold text-navy"
+                  >
+                    Installation durch GebOS
+                  </Label>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {install
+                      ? "GebOS organisiert die Montage – Geräte- und Monatspreise enthalten die Installation."
+                      : "Sie selbst, Ihr Hausmeister oder Ihr Fachbetrieb montiert die Geräte."}
+                  </p>
+                </div>
+                <Switch
+                  id="installation"
+                  checked={install}
+                  onCheckedChange={setInstall}
+                  className="mt-0.5"
+                />
+              </div>
             </StepCard>
 
             <StepCard step={2} title="Gebäude angeben">
@@ -563,7 +565,7 @@ export default function ConfiguratorPage() {
         />
         <div className="mt-8 grid gap-6 lg:grid-cols-2">
           <PackageCard
-            assets={[renders.gateway, heatAsset]}
+            render={renders.gateway}
             title="UVI"
             included={uvi}
             items={[
@@ -575,7 +577,7 @@ export default function ConfiguratorPage() {
             ]}
           />
           <PackageCard
-            assets={[renders.smokeAlarm]}
+            render={renders.smokeAlarm}
             title="Rauchwarnmelder"
             included={rwm}
             items={[