Editable Label

"use client"

import * as React from "react"
import { Pencil } from "lucide-react"

import { EditableLabel } from "@/components/ui/editable-label"

export default function EditableLabelDemo() {
  const [title, setTitle] = React.useState("Senior Software Engineer")

  return (
    <div className="flex items-center gap-2">
      <Pencil className="size-4 shrink-0 text-muted-foreground" />
      <EditableLabel value={title} onValueChange={setTitle} />
    </div>
  )
}

"use client"

import * as React from "react"

import { EditableLabel } from "@/components/ui/editable-label"

export default function EditableLabelPlaceholder() {
  const [title, setTitle] = React.useState("")

  return (
    <div className="w-full max-w-sm">
      <EditableLabel
        value={title}
        onValueChange={setTitle}
        placeholder="Click to add a title…"
      />
    </div>
  )
}