diff --git a/app/(basic)/homepage/page.tsx b/app/(basic)/homepage/page.tsx
new file mode 100644
index 0000000..d885058
--- /dev/null
+++ b/app/(basic)/homepage/page.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
+const Page = () => {
+ return (
+
+
+
+ Is it accessible?
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+ Is it styled?
+
+ Yes. It comes with default styles that matches the other components' aesthetic.
+
+
+
+ Is it animated?
+ Yes. It's animated by default, but you can disable it if you prefer.
+
+
+
(new Date());
+
return (
- Click me
- hello world
+ Click (me)
+ hello world
);
}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..d6ef712
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable react/prop-types */
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..f99dc3a
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+ return (
+