code-block-expand-demo

1"use client"
2 
3import * as React from "react"
4 
5import { CodeBlock } from "@/components/ui/code-block"
6 
7const longCode = `import * as React from "react"
8import { useEffect, useState, useCallback, useMemo } from "react"
9import { cn } from "@/lib/utils"
10 
11interface DataItem {
12  id: string
13  name: string
14  description: string
15  status: "active" | "inactive" | "pending"
16  createdAt: Date
17  updatedAt: Date
18  metadata: Record<string, unknown>
19}
20 
21interface DataTableProps {
22  data: DataItem[]
23  onSelect?: (item: DataItem) => void
24  onDelete?: (id: string) => void
25  onEdit?: (item: DataItem) => void
26  className?: string
27  loading?: boolean
28  error?: Error | null
29}
30 
31export function DataTable({
32  data,
33  onSelect,
34  onDelete,
35  onEdit,
36  className,
37  loading = false,
38  error = null,
39}: DataTableProps) {
40  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
41  const [sortColumn, setSortColumn] = useState<keyof DataItem>("name")
42  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")
43  const [filterText, setFilterText] = useState("")
44 
45  const filteredData = useMemo(() => {
46    return data
47      .filter((item) =>
48        item.name.toLowerCase().includes(filterText.toLowerCase()) ||
49        item.description.toLowerCase().includes(filterText.toLowerCase())
50      )
51      .sort((a, b) => {
52        const aVal = a[sortColumn]
53        const bVal = b[sortColumn]
54        const modifier = sortDirection === "asc" ? 1 : -1
55        if (aVal < bVal) return -1 * modifier
56        if (aVal > bVal) return 1 * modifier
57        return 0
58      })
59  }, [data, filterText, sortColumn, sortDirection])
60 
61  const handleSelectAll = useCallback(() => {
62    if (selectedIds.size === filteredData.length) {
63      setSelectedIds(new Set())
64    } else {
65      setSelectedIds(new Set(filteredData.map((item) => item.id)))
66    }
67  }, [filteredData, selectedIds.size])
68 
69  const handleSelectItem = useCallback((id: string) => {
70    setSelectedIds((prev) => {
71      const next = new Set(prev)
72      if (next.has(id)) {
73        next.delete(id)
74      } else {
75        next.add(id)
76      }
77      return next
78    })
79  }, [])
80 
81  if (loading) {
82    return <div className="flex items-center justify-center p-8">Loading...</div>
83  }
84 
85  if (error) {
86    return <div className="text-red-500 p-4">Error: {error.message}</div>
87  }
88 
89  return (
90    <div className={cn("rounded-lg border", className)}>
91      <div className="p-4 border-b">
92        <input
93          type="text"
94// … truncated