"use client"; import React, { useState } from "react"; import { Check, X } from "lucide-react"; import { cn } from "@/src/lib/utils"; const PRICING = [ { feature: "Users", basic: "Up to 5", pro: "Up to 20", ent: "Unlimited" }, { feature: "Storage", basic: "10GB", pro: "100GB", ent: "10TB" }, { feature: "Support", basic: "Email", pro: "Priority", ent: "24/7 Dedicated" }, { feature: "Analytics", basic: false, pro: true, ent: true }, ]; export default function BusinessTables() { const [activeTab, setActiveTab] = useState("pricing"); return (

{["pricing", "schedule", "invoice"].map(t => ( ))}

{activeTab === "pricing" && (

{PRICING.map((row) => ( ))}

Comparison	Basic	Pro	Enterprise
{row.feature}	{typeof row.basic === 'boolean' ? (row.basic ? : ) : row.basic}	{typeof row.pro === 'boolean' ? (row.pro ? : ) : row.pro}	{typeof row.ent === 'boolean' ? (row.ent ? : ) : row.ent}

)} {activeTab === "invoice" && (

INVOICE

#INV-2024-001

Acme Inc.

123 Business Rd, Tech City

Item	Qty	Price	Total
UX Consultation	10	$150.00	$1,500.00
Frontend Development	40	$100.00	$4,000.00

Subtotal$5,500.00

Tax (10%)$550.00

Total$6,050.00

)} {activeTab === "schedule" && (

Time

Mon

Tue

Wed

Thu

Fri

{[9, 10, 11, 12, 1, 2, 3, 4].map((hour) => (

{hour}:00

{/* Mock Slots */}

{hour === 10 &&

Team Sync

}

{hour === 2 &&

Code Review

}

{hour === 11 &&

Deploy

}

))}

)}

); };

Business Tables