-
-
- {props.children}
+
+ {props.variant === "error" && !props.icon && (
+
+ )}
+ {props.variant === "success" && !props.icon && (
+
+ )}
+ {props.variant === "warning" && !props.icon && (
+
+ )}
+ {props.icon}
+ {props.variant === "info" && !props.icon && (
+
+ )}
+
{props.children}
);
diff --git a/src/ui/badge.tsx b/src/ui/badge.tsx
new file mode 100644
index 0000000..ddda0f3
--- /dev/null
+++ b/src/ui/badge.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { cn } from "@/utils";
+
+export interface BadgeProps {
+ children?: ReactNode;
+ animate?: boolean;
+ className?: string;
+}
+
+export const Badge = (props: BadgeProps) => {
+ return (
+
+ {props.animate && (
+
+ )}
+
+ {props.children}
+
+
+ );
+};
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index 73b70b4..d5010fc 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -1,46 +1,98 @@
-import Loader from "@/motions/loader";
-import React, { forwardRef } from "react";
+import * as React from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/utils";
+import type { LucideIcon } from "lucide-react";
-export interface ButtonProps {
- type?: "button" | "submit" | "reset";
- disabled?: boolean;
- className?: string;
- isLoading?: boolean;
- loadingText?: string;
- icon?: React.ReactNode;
- children?: React.ReactNode;
- onClick?: (e: React.MouseEvent
) => void;
+interface IconProps {
+ Icon: LucideIcon;
+ iconPlacement: "left" | "right";
}
-const Button = (props: ButtonProps, ref: React.Ref) => {
- return (
-
- );
-};
+interface IconRefProps {
+ Icon?: never;
+ iconPlacement?: undefined;
+}
+
+export type ButtonIconProps = IconProps | IconRefProps;
+
+const buttonVariants = cva(
+ "inline-flex items-center space-x-3 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-neutral-700 focus-visible:ring-neutral-500",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-neutral-800 text-neutral-50 shadow hover:bg-neutral-800/90 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700/50",
+ destructive:
+ "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+ outline:
+ "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:hover:border-neutral-700/50",
+ secondary:
+ "bg-neutral-200 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+ ghost:
+ "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+ link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+ expandIcon:
+ "group relative border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:hover:border-neutral-700/50",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-12 rounded-md px-5",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef<
+ HTMLButtonElement,
+ ButtonProps & ButtonIconProps
+>(
+ (
+ {
+ className,
+ variant,
+ size,
+ asChild = false,
+ Icon,
+ iconPlacement,
+ ...props
+ },
+ ref,
+ ) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ {Icon && iconPlacement === "left" && (
+
+
+
+ )}
+ {props.children}
+ {Icon && iconPlacement === "right" && (
+
+
+
+ )}
+
+ );
+ },
+);
+Button.displayName = "Button";
-export default forwardRef(Button);
+export { Button, buttonVariants };
diff --git a/src/ui/card.tsx b/src/ui/card.tsx
new file mode 100644
index 0000000..3dbad2f
--- /dev/null
+++ b/src/ui/card.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { cn } from "@/utils";
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardDescription,
+ CardContent,
+};
diff --git a/src/ui/collapsible.tsx b/src/ui/collapsible.tsx
new file mode 100644
index 0000000..cb003d1
--- /dev/null
+++ b/src/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/ui/command.tsx b/src/ui/command.tsx
new file mode 100644
index 0000000..26ff4d6
--- /dev/null
+++ b/src/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@/utils";
+import { Dialog, DialogContent } from "@/ui/dialog";
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+ return (
+
+ );
+};
+
+const CommandInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+};
diff --git a/src/ui/dialog.tsx b/src/ui/dialog.tsx
new file mode 100644
index 0000000..9d8ac35
--- /dev/null
+++ b/src/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogTrigger,
+ DialogClose,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/src/ui/dropdown-menu.tsx b/src/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..985e418
--- /dev/null
+++ b/src/ui/dropdown-menu.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+
+import { cn } from "@/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+));
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+};
diff --git a/src/ui/dropdown.tsx b/src/ui/dropdown.tsx
deleted file mode 100644
index 11ff0ee..0000000
--- a/src/ui/dropdown.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import Button from "./button";
-import { ButtonProps } from "./button";
-import { BiLinkExternal } from "react-icons/bi";
-
-interface DropdownProps extends ButtonProps {
- title?: string | undefined;
- external?: boolean;
- onClick?: () => void;
-}
-
-export const Dropdown = (props: DropdownProps) => {
- return (
-
- );
-};
-
-export const DropdownItem = (props: DropdownProps) => {
- return (
-
-
-
- {props.icon &&
{props.icon}
}
- {props.children}
- {props.external && (
-
-
-
- )}
-
-
+ {body}
+
+ );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+};
diff --git a/src/ui/iconButton.tsx b/src/ui/iconButton.tsx
deleted file mode 100644
index 4559a60..0000000
--- a/src/ui/iconButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-interface IconButtonProps {
- icon: React.ReactNode;
- onClick?: () => void;
- className?: string;
-}
-
-const IconButton = (props: IconButtonProps) => {
- return (
-
- );
-};
-
-export default IconButton;
diff --git a/src/ui/index.ts b/src/ui/index.ts
deleted file mode 100644
index 082342d..0000000
--- a/src/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Input } from "./input";
-export { default as Textarea } from "./textarea";
-export { default as Button } from "./button";
\ No newline at end of file
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index 6df883c..fad2b77 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -1,14 +1,42 @@
-import { ComponentProps, FC } from "react";
-
-const Input: FC> = (props) => {
- return (
-
- );
-};
-
-export default Input;
+import * as React from "react";
+
+import { cn } from "@/utils";
+
+export type InputProps = React.InputHTMLAttributes;
+export type TextareaProps = React.TextareaHTMLAttributes;
+
+export const InputGlobalStyles =
+ "flex h-9 w-full rounded-md border border-neutral-300 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-400 focus-visible:dark:ring-indigo-900 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-700";
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+Input.displayName = "Input";
+
+const Textarea = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+
+export { Input, Textarea };
diff --git a/src/ui/label.tsx b/src/ui/label.tsx
new file mode 100644
index 0000000..4b4251c
--- /dev/null
+++ b/src/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/ui/linkRoute.tsx b/src/ui/linkRoute.tsx
deleted file mode 100644
index fa7b457..0000000
--- a/src/ui/linkRoute.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Link from "next/link";
-import React from "react";
-
-interface LinkRouteProps {
- href: string;
- className?: string;
- children: React.ReactNode;
-}
-
-const LinkRoute = (props: LinkRouteProps) => {
- return (
-
-
- {props.children}
-
-
- );
-};
-
-export default LinkRoute;
diff --git a/src/ui/modal.tsx b/src/ui/modal.tsx
deleted file mode 100644
index 320395f..0000000
--- a/src/ui/modal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-
-interface ModalProps {
- title?: string;
- children: React.ReactNode;
- className?: string;
- open: boolean;
- close: () => void;
-}
-
-const Modal = (props: ModalProps) => {
- return (
-
-
-
- );
-};
-
-export default Modal;
diff --git a/src/ui/popover.tsx b/src/ui/popover.tsx
new file mode 100644
index 0000000..87e2728
--- /dev/null
+++ b/src/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/ui/tabs.tsx b/src/ui/tabs.tsx
new file mode 100644
index 0000000..9f2319b
--- /dev/null
+++ b/src/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/ui/textarea.tsx b/src/ui/textarea.tsx
deleted file mode 100644
index 9838eec..0000000
--- a/src/ui/textarea.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-
-interface InputProps {
- className?: string;
- id?: string;
- type?: string;
- placeholder?: string;
- value?: string;
- onChange?: (e: React.ChangeEvent) => void;
- required?: boolean;
-}
-
-const Textarea = (props: InputProps) => {
- return (
-
- );
-};
-
-export default Textarea;
diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
new file mode 100644
index 0000000..367b388
--- /dev/null
+++ b/src/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/ui/typography.tsx b/src/ui/typography.tsx
new file mode 100644
index 0000000..da4758b
--- /dev/null
+++ b/src/ui/typography.tsx
@@ -0,0 +1,120 @@
+import { cn } from "@/utils";
+import { forwardRef } from "react";
+
+export const TypographyH1 = forwardRef<
+ HTMLHeadingElement,
+ React.ComponentPropsWithoutRef<"h1">
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+
+TypographyH1.displayName = "TypographyH1";
+
+export const TypographyH2 = forwardRef<
+ HTMLHeadingElement,
+ React.ComponentPropsWithoutRef<"h2">
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+
+TypographyH2.displayName = "TypographyH2";
+
+export const TypographyH3 = forwardRef<
+ HTMLHeadingElement,
+ React.ComponentPropsWithoutRef<"h3">
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+
+TypographyH3.displayName = "TypographyH3";
+
+export const TypographyH4 = forwardRef<
+ HTMLHeadingElement,
+ React.ComponentPropsWithoutRef<"h4">
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+
+TypographyH4.displayName = "TypographyH4";
+
+export const TypographyP = forwardRef<
+ HTMLParagraphElement,
+ React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+
+TypographyP.displayName = "TypographyP";
+
+export const TypographyListUl = forwardRef<
+ HTMLUListElement,
+ React.ComponentPropsWithoutRef<"ul">
+>(({ className, ...props }, ref) => {
+ return (
+ li]:mt-2", className)}
+ {...props}
+ />
+ );
+});
+
+TypographyListUl.displayName = "TypographyListUl";
+
+export const TypographyListOl = forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => {
+ return (
+ li]:mt-2", className)}
+ {...props}
+ />
+ );
+});
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
new file mode 100644
index 0000000..9b577bd
--- /dev/null
+++ b/src/utils/formatDate.ts
@@ -0,0 +1,5 @@
+import { format } from "date-fns";
+export const formatDate = (date: Date) => {
+ // Return "23 January 2021"
+ return format(date, "dd MMMM, yyyy");
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/utils/trpc.ts b/src/utils/trpc.ts
deleted file mode 100644
index 0f59d26..0000000
--- a/src/utils/trpc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import superjson from "superjson";
-import { httpBatchLink, loggerLink } from "@trpc/client";
-import { createTRPCNext } from "@trpc/next";
-import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
-
-import { type AppRouter } from "@/server/router";
-
-const getBaseUrl = () => {
- if (typeof window !== "undefined") return ""; // browser should use relative url
- if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
- return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
-};
-
-export const trpc = createTRPCNext({
- config() {
- return {
- transformer: superjson,
- links: [
- loggerLink({
- enabled: (opts) =>
- process.env.NODE_ENV === "development" ||
- (opts.direction === "down" && opts.result instanceof Error),
- }),
- httpBatchLink({
- url: `${getBaseUrl()}/api/trpc`,
- }),
- ],
- };
- },
- ssr: false,
-});
-
-/**
- * Inference helper for inputs
- * @example type HelloInput = RouterInputs['example']['hello']
- **/
-export type RouterInputs = inferRouterInputs;
-/**
- * Inference helper for outputs
- * @example type HelloOutput = RouterOutputs['example']['hello']
- **/
-export type RouterOutputs = inferRouterOutputs;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
deleted file mode 100644
index a572764..0000000
--- a/tailwind.config.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
- theme: {
- extend: {
- fontFamily: {
- sans: ["Inter", "sans-serif"],
- },
- fontSize: {
- custom: "15px",
- },
- colors: {
- light: "#FAFAFA",
- midnight: "#121212",
- midnightLight: "#1D1D1D",
- },
- },
- },
- plugins: [],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..1f445cc
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,69 @@
+import type { Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";
+
+const config = {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "1rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ nordway: {
+ 50: "#E7E7E9",
+ 100: "#D1D2D6",
+ 200: "#A3A6AD",
+ 300: "#747781",
+ 400: "#4B4D53",
+ 500: "#222326",
+ 600: "#1A1B1E",
+ 700: "#131416",
+ 800: "#0E0F10",
+ 900: "#070708",
+ 950: "#020203",
+ },
+ },
+ fontFamily: {
+ sans: ["var(--font-sans)", ...fontFamily.sans],
+ mono: ["var(--font-geist-mono)", ...fontFamily.mono],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ "background-shine": {
+ from: {
+ backgroundPosition: "0 0",
+ },
+ to: {
+ backgroundPosition: "-200% 0",
+ },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ "background-shine": "background-shine 2s linear infinite",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+} satisfies Config;
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
index dd7ebfe..5707765 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,38 @@
{
"compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@/*": ["./src/*"]
- },
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noEmit": true,
"esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "node",
+ "skipLibCheck": true,
+ "target": "es2022",
+ "allowJs": true,
"resolveJsonModule": true,
+ "moduleDetection": "force",
"isolatedModules": true,
+ "strict": true,
+ "noUncheckedIndexedAccess": true,
+ "checkJs": true,
+ "lib": ["dom", "dom.iterable", "ES2022"],
+ "noEmit": true,
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
"jsx": "preserve",
+ "plugins": [{ "name": "next" }],
"incremental": true,
- "noUncheckedIndexedAccess": true
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ "auth": ["src/auth.config.ts"]
+ }
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
+ "include": [
+ ".eslintrc.cjs",
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "**/*.cjs",
+ "**/*.js",
+ ".next/types/**/*.ts",
+ "src/env.mjs",
+ "next.config.mjs"
+ ],
"exclude": ["node_modules"]
}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..48840a8
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,16 @@
+{
+ "redirects": [
+ {
+ "source": "/git",
+ "destination": "https://github.com/pheralb/slug"
+ },
+ {
+ "source": "/dash",
+ "destination": "/dashboard"
+ },
+ {
+ "source": "/docs",
+ "destination": "/docs/getting-started"
+ }
+ ]
+}
+
+ 
+
-
+
-