|
"use client" |
|
|
|
import { ReactNode, useRef } from "react" |
|
|
|
|
|
import ContentEditable, { ContentEditableEvent } from "react-contenteditable" |
|
|
|
import { useStore } from "@/app/store" |
|
import { cn } from "@/lib/utils" |
|
|
|
export function Bubble({ children, onChange }: { |
|
children: ReactNode; |
|
onChange: (newCaption: string) => void |
|
}) { |
|
|
|
const ref = useRef<HTMLDivElement>(null) |
|
const zoomLevel = useStore(state => state.zoomLevel) |
|
const showCaptions = useStore(state => state.showCaptions) |
|
|
|
const text = useRef(`${children || ''}`) |
|
|
|
const handleChange = (evt: ContentEditableEvent) => { |
|
|
|
|
|
|
|
text.current = `${ref.current?.innerText || ''}` |
|
}; |
|
|
|
const handleBlur = () => { |
|
onChange(text.current) |
|
}; |
|
|
|
|
|
|
|
return ( |
|
<div className={cn( |
|
`bottom-0`, |
|
// `cursor-grab`, |
|
`absolute flex w-full items-center justify-center`, |
|
zoomLevel > 200 ? `p-4 md:p-8` : |
|
zoomLevel > 180 ? `p-[14px] md:p-8` : |
|
zoomLevel > 160 ? `p-[12px] md:p-[28px]` : |
|
zoomLevel > 140 ? `p-[10px] md:p-[26px]` : |
|
zoomLevel > 120 ? `p-2 md:p-6` : |
|
zoomLevel > 100 ? `p-1.5 md:p-[20px]` : |
|
zoomLevel > 90 ? `p-1.5 md:p-4` : |
|
zoomLevel > 40 ? `p-1 md:p-2` : |
|
`p-0.5 md:p-2`, |
|
`print:p-2` |
|
)}> |
|
<div |
|
ref={ref} |
|
className={cn( |
|
`bg-stone-50`, |
|
`border-stone-800`, |
|
`transition-all duration-200 ease-in-out`, |
|
zoomLevel > 140 ? `border-[1.5px] md:border-[2px]` : |
|
zoomLevel > 120 ? `border-[1px] md:border-[1.5px]` : |
|
zoomLevel > 90 ? `border-[0.5px] md:border-[1px]` : |
|
zoomLevel > 40 ? `border-transparent md:border-[0.5px]` : |
|
`border-transparent md:border-transparent`, |
|
`print:border-[1px]`, |
|
|
|
zoomLevel > 200 ? `p-4 md:p-8` : |
|
zoomLevel > 180 ? `p-[14px] md:p-6` : |
|
zoomLevel > 160 ? `p-3 md:p-5` : |
|
zoomLevel > 140 ? `p-[10px] md:p-4` : |
|
zoomLevel > 120 ? `p-2 md:p-3` : |
|
zoomLevel > 100 ? `p-1.5 md:p-2` : |
|
zoomLevel > 90 ? `p-1 md:p-1` : |
|
zoomLevel > 40 ? `p-0.5 md:p-0.5` : |
|
`p-0.5 md:p-0.5`, |
|
`print:p-1.5`, |
|
|
|
zoomLevel > 220 ? `text-base md:text-lg` : |
|
zoomLevel > 200 ? `text-sm md:text-md` : |
|
zoomLevel > 180 ? `text-xs md:text-base` : |
|
zoomLevel > 140 ? `text-2xs md:text-sm` : |
|
zoomLevel > 120 ? `text-3xs md:text-xs` : |
|
zoomLevel > 100 ? `text-4xs md:text-2xs` : |
|
zoomLevel > 90 ? `text-5xs md:text-3xs` : |
|
zoomLevel > 40 ? `text-6xs md:text-4xs` |
|
: `text-7xs md:text-5xs`, |
|
`print:text-4xs`, |
|
|
|
zoomLevel > 140 ? `rounded-xl md:rounded-2xl` : |
|
zoomLevel > 120 ? `rounded-lg md:rounded-xl` : |
|
zoomLevel > 90 ? `rounded-md md:rounded-lg` : |
|
zoomLevel > 40 ? `rounded-sm md:rounded-md` : |
|
`rounded-sm md:rounded-sm`, |
|
`print:rounded-xl`, |
|
|
|
showCaptions ? ( |
|
zoomLevel > 90 ? `block` : `hidden md:block` |
|
) : `hidden`, |
|
|
|
`text-center` |
|
)}> |
|
<ContentEditable |
|
html={text.current} |
|
className="line-clamp-3" |
|
onBlur={handleBlur} |
|
onChange={handleChange} |
|
/> |
|
</div> |
|
</div> |
|
) |
|
} |