ui Architecture Docs
Home / File/ date-picker-demo.tsx — ui Source File

date-picker-demo.tsx — ui Source File

Architecture documentation for date-picker-demo.tsx, a tsx file in the ui codebase. 10 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 10 imports 1 dependents 4 functions

Entity Profile

Dependency Diagram

graph LR
  c8a1c243_9ab4_c534_0c61_9dd60705e506["date-picker-demo.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  f9e8c1ea_9de4_3e04_ca27_b15cada2e81e["date-fns"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> f9e8c1ea_9de4_3e04_ca27_b15cada2e81e
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  bfc8708c_7488_3983_8998_32b793781735["react-day-picker"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> bfc8708c_7488_3983_8998_32b793781735
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  7c217573_70ba_6759_49cd_674343c15bd1["use-mobile"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 7c217573_70ba_6759_49cd_674343c15bd1
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 57e86e45_ac6e_7278_be08_9092724e8401
  7bfe56e6_25f1_1b2f_588d_f14238c3c071["calendar"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 7bfe56e6_25f1_1b2f_588d_f14238c3c071
  538a1992_2e44_c995_0fe9_493e88eb6ea5["drawer"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 538a1992_2e44_c995_0fe9_493e88eb6ea5
  64a3481c_a85b_fe79_409a_cb7f3f4bb871["popover"]
  c8a1c243_9ab4_c534_0c61_9dd60705e506 --> 64a3481c_a85b_fe79_409a_cb7f3f4bb871
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> c8a1c243_9ab4_c534_0c61_9dd60705e506
  style c8a1c243_9ab4_c534_0c61_9dd60705e506 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { addDays, format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { type DateRange } from "react-day-picker"

import { cn } from "@/lib/utils"
import { useIsMobile } from "@/hooks/use-mobile"
import { Button } from "@/registry/new-york-v4/ui/button"
import { Calendar } from "@/registry/new-york-v4/ui/calendar"
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/new-york-v4/ui/drawer"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/new-york-v4/ui/popover"

export function DatePickerDemo() {
  return (
    <div className="flex flex-col items-start gap-4 md:flex-row">
      <DatePickerSimple />
      <DataPickerWithDropdowns />
      <DatePickerWithRange />
    </div>
  )
}

function DatePickerSimple() {
  const [date, setDate] = React.useState<Date>()

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "min-w-[200px] justify-start px-2 font-normal",
            !date && "text-muted-foreground"
          )}
        >
          <CalendarIcon className="text-muted-foreground" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

function DatePickerWithRange() {
// ... (120 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • calendar
  • date-fns
  • drawer
  • lucide-react
  • popover
  • react
  • react-day-picker
  • use-mobile
  • utils

Imported By

Source

Frequently Asked Questions

What does date-picker-demo.tsx do?
date-picker-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in date-picker-demo.tsx?
date-picker-demo.tsx defines 4 function(s): DataPickerWithDropdowns, DatePickerDemo, DatePickerSimple, DatePickerWithRange.
What does date-picker-demo.tsx depend on?
date-picker-demo.tsx imports 10 module(s): button, calendar, date-fns, drawer, lucide-react, popover, react, react-day-picker, and 2 more.
What files import date-picker-demo.tsx?
date-picker-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is date-picker-demo.tsx in the architecture?
date-picker-demo.tsx is located at apps/v4/app/(internal)/sink/components/date-picker-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free