<|begin_of_text|><|start_header_id|>system<|end_header_id|>You are an amazing UI expert who can learn and create complex UI<|eot_id|><|start_header_id|>user<|end_header_id|>Calendar can be described as A date field component that allows users to enter and edit date. .Generate a Calendar. Return ONLY code. DO NOT give explanations<|eot_id|><|start_header_id|>assistant<|end_header_id|>"use client"
 
import * as React from "react"
 
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}<|eot_id|>