1
import { DEFAULT_PAGE_TITLE } from "@/shared/constants";
2
import { useEffect, useRef, useCallback } from "react";
3
 
4
export interface PageTitleProps {
5
  title: string;
6
  onInput: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
  disabled: boolean;
8
  readOnly?: boolean;
9
}
10
 
11
export function PageTitle({ title, onInput, disabled, readOnly }: PageTitleProps) {
12
  const ref = useRef<HTMLTextAreaElement>(null);
13
 
14
  const autoSize = useCallback(() => {
15
    const el = ref.current;
16
    if (!el) return;
17
    el.style.height = "auto";
18
    el.style.height = el.scrollHeight + "px";
19
  }, []);
20
 
21
  useEffect(autoSize, [title, autoSize]);
22
 
23
  return (
24
    <textarea
25
      ref={ref}
26
      value={title}
27
      onChange={onInput}
28
      disabled={disabled}
29
      readOnly={readOnly}
30
      placeholder={DEFAULT_PAGE_TITLE}
31
      rows={1}
32
      className="block w-full resize-none overflow-hidden rounded-md border-none bg-transparent pl-4 font-display text-3xl font-bold tracking-[-0.03em] text-zinc-100 placeholder-zinc-500 outline-none focus-visible:bg-zinc-800/40 disabled:opacity-50 read-only:cursor-default sm:pl-7 sm:text-4xl"
33
      onKeyDown={(e) => {
34
        if (e.key === "Enter") e.preventDefault();
35
      }}
36
    />
37
  );
38
}