blocks-dusted 0.1.0 → 0.1.2

package/templates/blocks/DD-ComparisonTable/Component.tsx

@@ -1,272 +1,256 @@
-"use client";
-
-import React, { Fragment, useState } from "react";
-import { Check, Minus, Plus } from "lucide-react";
-
-type TierKey = "free" | "pro" | "team";
-
-type CellValue = boolean | string;
-
-interface FeatureRow {
-  id?: string | null;
-  label?: string | null;
-  free?: CellValue | null;
-  pro?: CellValue | null;
-  team?: CellValue | null;
-}
-
-interface FeatureGroup {
-  id?: string | null;
-  group?: string | null;
-  rows?: FeatureRow[] | null;
-}
-
-interface TierHeader {
-  key: TierKey;
-  label: string;
-  highlight: boolean;
-}
-
-interface StudioComparisonTableProps {
-  eyebrow?: string | null;
-  heading?: string | null;
-  defaultOpen?: boolean | null;
-  groups?: FeatureGroup[] | null;
-  sectionId?: string | null;
-  customCSS?: string | null;
-  [key: string]: unknown;
-}
-
-const DEFAULT_GROUPS: FeatureGroup[] = [
-  {
-    group: "Components & Templates",
-    rows: [
-      { label: "Free components", free: true, pro: true, team: true },
-      { label: "Premium components", free: false, pro: "120+", team: "120+" },
-      { label: "Free templates", free: true, pro: true, team: true },
-      { label: "Premium templates", free: false, pro: "24+", team: "24+" },
-      { label: "Payload CMS v3 blocks", free: false, pro: true, team: true },
-      { label: "Figma source files", free: false, pro: true, team: true },
-    ],
-  },
-  {
-    group: "Licensing",
-    rows: [
-      { label: "Personal use", free: true, pro: true, team: true },
-      {
-        label: "Commercial projects",
-        free: false,
-        pro: "1 project",
-        team: "Unlimited",
-      },
-      { label: "White-label license", free: false, pro: false, team: true },
-      { label: "Client resale rights", free: false, pro: false, team: true },
-    ],
-  },
-  {
-    group: "Updates & Access",
-    rows: [
-      { label: "Lifetime updates", free: true, pro: true, team: true },
-      {
-        label: "Early access to new releases",
-        free: false,
-        pro: true,
-        team: true,
-      },
-      { label: "Download source files", free: false, pro: true, team: true },
-    ],
-  },
-  {
-    group: "Support",
-    rows: [
-      { label: "Community Discord", free: true, pro: true, team: true },
-      { label: "Priority email support", free: false, pro: true, team: true },
-      { label: "Dedicated Slack channel", free: false, pro: false, team: true },
-      { label: "1-on-1 onboarding call", free: false, pro: false, team: true },
-      { label: "SLA support guarantee", free: false, pro: false, team: true },
-    ],
-  },
-  {
-    group: "Team",
-    rows: [
-      { label: "Team seats", free: "1", pro: "1", team: "Up to 10" },
-      {
-        label: "Invoice & billing management",
-        free: false,
-        pro: false,
-        team: true,
-      },
-      {
-        label: "Custom Payload CMS schemas",
-        free: false,
-        pro: false,
-        team: true,
-      },
-    ],
-  },
-];
-
-function Cell({
-  value,
-  highlight,
-}: {
-  value: CellValue | null | undefined;
-  highlight: boolean;
-}) {
-  if (typeof value === "string") {
-    return (
-      <span
-        className={`text-sm font-medium ${highlight ? "text-indigo-900 dark:text-lime-400" : "text-stone-700 dark:text-stone-300"}`}
-      >
-        {value}
-      </span>
-    );
-  }
-
-  if (value === true) {
-    return (
-      <div
-        className={`mx-auto flex h-5 w-5 items-center justify-center rounded-full ${
-          highlight ? "bg-stone-900" : "bg-stone-800"
-        }`}
-        style={{ cornerShape: "squircle" } as React.CSSProperties}
-      >
-        <Check
-          className={`h-3 w-3 ${highlight ? "text-stone-50" : "text-stone-300"}`}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto flex h-5 w-5 items-center justify-center opacity-30">
-      <Minus className="h-4 w-4 text-stone-600" />
-    </div>
-  );
-}
-
-export function DDComparisonTable({
-  eyebrow = "Full breakdown",
-  heading = "Compare all features",
-  defaultOpen = true,
-  groups,
-  sectionId,
-}: StudioComparisonTableProps) {
-  const [open, setOpen] = useState(defaultOpen !== false);
-  const featureGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS;
-
-  const tiers: TierHeader[] = [
-    { key: "free", label: "Free", highlight: false },
-    { key: "pro", label: "Pro", highlight: true },
-    { key: "team", label: "Team", highlight: false },
-  ];
-
-  return (
-    <section
-      id={sectionId ?? undefined}
-      className="studio-comparison-table border-t border-stone-800 bg-transparent px-6 py-20"
-    >
-      <div className="mx-auto max-w-6xl">
-        <button
-          type="button"
-          onClick={() => setOpen((current) => !current)}
-          className="group mb-8 flex w-full cursor-pointer items-center justify-between gap-6 text-left"
-        >
-          <div>
-            {eyebrow && (
-              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-stone-500">
-                {eyebrow}
-              </p>
-            )}
-            {heading && (
-              <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50">
-                {heading}
-              </h2>
-            )}
-          </div>
-
-          <div
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
-            style={{ cornerShape: "squircle" } as React.CSSProperties}
-          >
-            {open ? (
-              <Minus className="h-4 w-4 text-stone-700 dark:text-stone-400 transition-transform duration-300" />
-            ) : (
-              <Plus className="h-4 w-4 text-stone-700 dark:text-stone-300 transition-transform duration-300" />
-            )}
-          </div>
-        </button>
-
-        {open && (
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-160">
-              <thead>
-                <tr>
-                  <th className="w-1/2 pb-0 text-left" />
-                  {tiers.map((tier) => (
-                    <th key={tier.key} className="pb-0 text-center">
-                      <span
-                        className={`inline-block rounded-lg px-4 py-1.5 text-sm font-semibold ${
-                          tier.highlight
-                            ? "bg-stone-100 text-stone-900"
-                            : "border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800/50 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
-                        }`}
-                        style={
-                          { cornerShape: "squircle" } as React.CSSProperties
-                        }
-                      >
-                        {tier.label}
-                      </span>
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-
-              <tbody>
-                {featureGroups.map((group, groupIndex) => (
-                  <Fragment key={group.id ?? group.group ?? groupIndex}>
-                    <tr>
-                      <td colSpan={4} className="pb-3 pt-0">
-                        <span className="text-xs font-bold uppercase tracking-widest text-stone-500">
-                          {group.group}
-                        </span>
-                      </td>
-                    </tr>
-
-                    {(group.rows ?? []).map((row, rowIndex) => (
-                      <tr
-                        key={row.id ?? row.label ?? rowIndex}
-                        className={`border-t transition-colors hover:bg-stone-200/40 dark:hover:bg-stone-900/40 ${
-                          rowIndex === 0
-                            ? "border-stone-800"
-                            : "border-stone-800/50"
-                        }`}
-                      >
-                        <td className="py-3.5 pr-6">
-                          <span className="text-sm text-stone-400">
-                            {row.label}
-                          </span>
-                        </td>
-
-                        {tiers.map((tier) => (
-                          <td key={tier.key} className="py-3.5 text-center">
-                            <Cell
-                              value={row[tier.key]}
-                              highlight={tier.highlight}
-                            />
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </Fragment>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-export default DDComparisonTable;
+'use client'
+
+import React, { Fragment, useState } from 'react'
+import { Check, Minus, Plus } from 'lucide-react'
+
+type TierKey = 'free' | 'pro' | 'team'
+
+type CellValue = boolean | string
+
+interface FeatureRow {
+  id?: string | null
+  label?: string | null
+  free?: CellValue | null
+  pro?: CellValue | null
+  team?: CellValue | null
+}
+
+interface FeatureGroup {
+  id?: string | null
+  group?: string | null
+  rows?: FeatureRow[] | null
+}
+
+interface TierHeader {
+  key: TierKey
+  label: string
+  highlight: boolean
+}
+
+interface StudioComparisonTableProps {
+  eyebrow?: string | null
+  heading?: string | null
+  defaultOpen?: boolean | null
+  groups?: FeatureGroup[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+  [key: string]: unknown
+}
+
+const DEFAULT_GROUPS: FeatureGroup[] = [
+  {
+    group: 'Components & Templates',
+    rows: [
+      { label: 'Free components', free: true, pro: true, team: true },
+      { label: 'Premium components', free: false, pro: '120+', team: '120+' },
+      { label: 'Free templates', free: true, pro: true, team: true },
+      { label: 'Premium templates', free: false, pro: '24+', team: '24+' },
+      { label: 'Payload CMS v3 blocks', free: false, pro: true, team: true },
+      { label: 'Figma source files', free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: 'Licensing',
+    rows: [
+      { label: 'Personal use', free: true, pro: true, team: true },
+      {
+        label: 'Commercial projects',
+        free: false,
+        pro: '1 project',
+        team: 'Unlimited',
+      },
+      { label: 'White-label license', free: false, pro: false, team: true },
+      { label: 'Client resale rights', free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: 'Updates & Access',
+    rows: [
+      { label: 'Lifetime updates', free: true, pro: true, team: true },
+      {
+        label: 'Early access to new releases',
+        free: false,
+        pro: true,
+        team: true,
+      },
+      { label: 'Download source files', free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: 'Support',
+    rows: [
+      { label: 'Community Discord', free: true, pro: true, team: true },
+      { label: 'Priority email support', free: false, pro: true, team: true },
+      { label: 'Dedicated Slack channel', free: false, pro: false, team: true },
+      { label: '1-on-1 onboarding call', free: false, pro: false, team: true },
+      { label: 'SLA support guarantee', free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: 'Team',
+    rows: [
+      { label: 'Team seats', free: '1', pro: '1', team: 'Up to 10' },
+      {
+        label: 'Invoice & billing management',
+        free: false,
+        pro: false,
+        team: true,
+      },
+      {
+        label: 'Custom Payload CMS schemas',
+        free: false,
+        pro: false,
+        team: true,
+      },
+    ],
+  },
+]
+
+function Cell({ value, highlight }: { value: CellValue | null | undefined; highlight: boolean }) {
+  if (typeof value === 'string') {
+    return (
+      <span
+        className={`text-sm font-medium ${highlight ? 'text-indigo-900 dark:text-lime-400' : 'text-stone-700 dark:text-stone-300'}`}
+      >
+        {value}
+      </span>
+    )
+  }
+
+  if (value === true) {
+    return (
+      <div
+        className={`mx-auto flex h-5 w-5 items-center justify-center rounded-full ${
+          highlight ? 'bg-stone-900' : 'bg-stone-800'
+        }`}
+        style={{ cornerShape: 'squircle' } as React.CSSProperties}
+      >
+        <Check className={`h-3 w-3 ${highlight ? 'text-stone-50' : 'text-stone-300'}`} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto flex h-5 w-5 items-center justify-center opacity-30">
+      <Minus className="h-4 w-4 text-stone-600" />
+    </div>
+  )
+}
+
+export function DDComparisonTable({
+  eyebrow = 'Full breakdown',
+  heading = 'Compare all features',
+  defaultOpen = true,
+  groups,
+  sectionId,
+}: StudioComparisonTableProps) {
+  const [open, setOpen] = useState(defaultOpen !== false)
+  const featureGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS
+
+  const tiers: TierHeader[] = [
+    { key: 'free', label: 'Free', highlight: false },
+    { key: 'pro', label: 'Pro', highlight: true },
+    { key: 'team', label: 'Team', highlight: false },
+  ]
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="studio-comparison-table border-t border-stone-800 bg-transparent px-6 py-20"
+    >
+      <div className="mx-auto max-w-6xl">
+        #BlockName-DDComparisonTable
+        <button
+          type="button"
+          onClick={() => setOpen((current) => !current)}
+          className="group mb-8 flex w-full cursor-pointer items-center justify-between gap-6 text-left"
+        >
+          <div>
+            {eyebrow && (
+              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-stone-500">
+                {eyebrow}
+              </p>
+            )}
+            {heading && (
+              <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50">
+                {heading}
+              </h2>
+            )}
+          </div>
+
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
+            style={{ cornerShape: 'squircle' } as React.CSSProperties}
+          >
+            {open ? (
+              <Minus className="h-4 w-4 text-stone-700 dark:text-stone-400 transition-transform duration-300" />
+            ) : (
+              <Plus className="h-4 w-4 text-stone-700 dark:text-stone-300 transition-transform duration-300" />
+            )}
+          </div>
+        </button>
+
+        {open && (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-160">
+              <thead>
+                <tr>
+                  <th className="w-1/2 pb-0 text-left" />
+                  {tiers.map((tier) => (
+                    <th key={tier.key} className="pb-0 text-center">
+                      <span
+                        className={`inline-block rounded-lg px-4 py-1.5 text-sm font-semibold ${
+                          tier.highlight
+                            ? 'bg-stone-100 text-stone-900'
+                            : 'border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800/50 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500'
+                        }`}
+                        style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                      >
+                        {tier.label}
+                      </span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody>
+                {featureGroups.map((group, groupIndex) => (
+                  <Fragment key={group.id ?? group.group ?? groupIndex}>
+                    <tr>
+                      <td colSpan={4} className="pb-3 pt-0">
+                        <span className="text-xs font-bold uppercase tracking-widest text-stone-500">
+                          {group.group}
+                        </span>
+                      </td>
+                    </tr>
+
+                    {(group.rows ?? []).map((row, rowIndex) => (
+                      <tr
+                        key={row.id ?? row.label ?? rowIndex}
+                        className={`border-t transition-colors hover:bg-stone-200/40 dark:hover:bg-stone-900/40 ${
+                          rowIndex === 0 ? 'border-stone-800' : 'border-stone-800/50'
+                        }`}
+                      >
+                        <td className="py-3.5 pr-6">
+                          <span className="text-sm text-stone-400">{row.label}</span>
+                        </td>
+
+                        {tiers.map((tier) => (
+                          <td key={tier.key} className="py-3.5 text-center">
+                            <Cell value={row[tier.key]} highlight={tier.highlight} />
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default DDComparisonTable