Initial commit

src/app/(user)/store/streaming-plan-card.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { Film, Search, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { StorePlanHeader } from "./plan-card-parts";
+import { PlanAvailabilityBadges } from "./plan-availability-badges";
+import { StreamingDetailDialog } from "./streaming-detail-dialog";
+import type { StreamingPlan } from "./streaming-plan-types";
+
+interface Props {
+  plan: StreamingPlan;
+}
+
+export function StreamingPlanCard({ plan }: Props) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <>
+      <article
+        id={`plan-${plan.id}`}
+        className="surface-card surface-lift group relative scroll-mt-24 flex flex-col overflow-hidden rounded-xl text-left"
+      >
+
+        <StorePlanHeader
+          eyebrow={
+            <span className="inline-flex items-center gap-2 text-amber-700 dark:text-amber-300">
+              <Film className="size-3.5" /> STREAMING
+            </span>
+          }
+          name={plan.name}
+          meta={plan.serviceName ? `${plan.serviceName} · ${plan.durationDays} 天` : `${plan.durationDays} 天`}
+          price={`¥${plan.price.toFixed(0)}`}
+          priceSuffix={`/${plan.durationDays}天`}
+        />
+
+        <div className="relative px-6">
+          <div className="grid gap-2 sm:grid-cols-2">
+            <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5">
+              <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Film className="size-3.5 text-amber-600" /> 服务类型
+              </p>
+              <p className="mt-1 text-sm font-medium">{plan.serviceName ?? "精选流媒体"}</p>
+            </div>
+            <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5">
+              <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Sparkles className="size-3.5 text-amber-600" /> 交付方式
+              </p>
+              <p className="mt-1 text-sm font-medium">支付后在订阅页查看</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-auto space-y-4 px-6 pb-6 pt-4">
+          <PlanAvailabilityBadges
+            totalLimit={plan.totalLimit}
+            perUserLimit={plan.perUserLimit}
+            remainingCount={plan.remainingCount}
+            isAvailable={plan.isAvailable}
+            unavailableLabel="暂时售罄"
+          />
+
+          <Button
+            type="button"
+            className="w-full"
+            size="lg"
+            onClick={() => setDialogOpen(true)}
+          >
+            <Search className="size-4" />
+            查看详情与购买
+          </Button>
+        </div>
+      </article>
+
+      <StreamingDetailDialog open={dialogOpen} onOpenChange={setDialogOpen} plan={plan} />
+    </>
+  );
+}