jbilcke-hf's picture
jbilcke-hf HF staff
dynamic paddings and borders
82d85df
raw
history blame
558 Bytes
"use client"
import { ReactNode } from "react"
import { cn } from "@/lib/utils"
import { useStore } from "@/app/store"
export function Grid({ children, className }: { children: ReactNode; className: string }) {
const zoomLevel = useStore(state => state.zoomLevel)
return (
<div
// the "fixed" width ensure our comic keeps a consistent ratio
className={cn(
`w-full h-full grid`,
className
)}
style={{
gap: `${Math.round((zoomLevel / 100) * 8)}px`
}}
>
{children}
</div>
)
}