58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const MAX_ROWS = 8
|
|
const MAX_COLS = 10
|
|
|
|
export function DocsInsertTablePicker({
|
|
onInsert,
|
|
}: {
|
|
onInsert: (rows: number, cols: number) => void
|
|
}) {
|
|
const [hover, setHover] = useState({ rows: 0, cols: 0 })
|
|
|
|
const label =
|
|
hover.rows > 0 && hover.cols > 0 ? `${hover.cols} x ${hover.rows}` : "Insérer un tableau"
|
|
|
|
return (
|
|
<div
|
|
className="px-3 py-2"
|
|
onMouseLeave={() => setHover({ rows: 0, cols: 0 })}
|
|
>
|
|
<div
|
|
className="inline-grid gap-0.5"
|
|
style={{ gridTemplateColumns: `repeat(${MAX_COLS}, 1fr)` }}
|
|
role="grid"
|
|
aria-label="Sélecteur de tableau"
|
|
>
|
|
{Array.from({ length: MAX_ROWS }, (_, rowIndex) =>
|
|
Array.from({ length: MAX_COLS }, (_, colIndex) => {
|
|
const row = rowIndex + 1
|
|
const col = colIndex + 1
|
|
const active = row <= hover.rows && col <= hover.cols
|
|
return (
|
|
<button
|
|
key={`${row}-${col}`}
|
|
type="button"
|
|
className={cn(
|
|
"size-4 rounded-sm border border-[#dadce0] bg-white transition-colors",
|
|
"hover:border-[#1a73e8]",
|
|
active && "border-[#1a73e8] bg-[#d2e3fc]"
|
|
)}
|
|
aria-label={`${col} colonnes par ${row} lignes`}
|
|
onMouseEnter={() => setHover({ rows: row, cols: col })}
|
|
onClick={() => onInsert(row, col)}
|
|
/>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
<p className="mt-2 text-center text-xs text-[#5f6368] dark:text-muted-foreground">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|