diff --git a/components/ui/8bit/assets/chevronLeftIcon.tsx b/components/ui/8bit/assets/chevronLeftIcon.tsx new file mode 100644 index 00000000..e06a7259 --- /dev/null +++ b/components/ui/8bit/assets/chevronLeftIcon.tsx @@ -0,0 +1,59 @@ +export const ChevronLeftIcon = () => { + return ( + + + + + + + + + + ); +}; diff --git a/components/ui/8bit/assets/chevronRightIcon.tsx b/components/ui/8bit/assets/chevronRightIcon.tsx new file mode 100644 index 00000000..24dc32f7 --- /dev/null +++ b/components/ui/8bit/assets/chevronRightIcon.tsx @@ -0,0 +1,24 @@ +export const ChevronRightIcon = () => { + return ( + + + + + + + + + + ); +}; diff --git a/components/ui/8bit/breadcrumb.tsx b/components/ui/8bit/breadcrumb.tsx index 41624580..70bc96f9 100644 --- a/components/ui/8bit/breadcrumb.tsx +++ b/components/ui/8bit/breadcrumb.tsx @@ -4,6 +4,7 @@ import { MoreHorizontal } from "lucide-react"; import { cn } from "@/lib/utils"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; import { Breadcrumb as ShadcnBreadcrumb, BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis, @@ -52,31 +53,6 @@ interface BitBreadcrumbLinkProps extends React.ComponentProps<"a">, VariantProps {} -const ChevronRight = () => { - return ( - - - - - - - - - - ); -}; - function Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) { const { variant, className, font } = props; @@ -162,7 +138,7 @@ function BreadcrumbSeparator({ ...props }: BitBreadcrumbListItemProps) { className={cn(className, font !== "normal" && "retro", "[&>svg]:size-7")} {...props} > - {children ?? } + {children ?? } ); } diff --git a/components/ui/8bit/calendar.tsx b/components/ui/8bit/calendar.tsx index f5e989df..0ca33e42 100644 --- a/components/ui/8bit/calendar.tsx +++ b/components/ui/8bit/calendar.tsx @@ -3,6 +3,8 @@ import { DayPicker } from "react-day-picker"; import { cn } from "@/lib/utils"; +import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; import { Calendar as ShadcnCalendar } from "@/components/ui/calendar"; import { buttonVariants } from "./button"; @@ -124,85 +126,10 @@ function Calendar({ className, classNames, font, ...props }: CalendarProps) { }, Chevron: ({ className, ...props }) => { if (props.orientation === "left") { - return ( - - - - - - - - - - ); + return ; } - return ( - - - - - - - - - - ); + return ; }, }} {...props} diff --git a/components/ui/8bit/context-menu.tsx b/components/ui/8bit/context-menu.tsx index c3090897..20787478 100644 --- a/components/ui/8bit/context-menu.tsx +++ b/components/ui/8bit/context-menu.tsx @@ -3,10 +3,12 @@ import * as React from "react"; import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"; -import { ChevronRight, Circle } from "lucide-react"; +import { Circle } from "lucide-react"; import { cn } from "@/lib/utils"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; + import "./styles/retro.css"; const ContextMenu = ContextMenuPrimitive.Root; @@ -37,7 +39,7 @@ const ContextMenuSubTrigger = React.forwardRef< {...props} > {children} - + )); ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName; diff --git a/components/ui/8bit/menubar.tsx b/components/ui/8bit/menubar.tsx index cc9b7664..598f4b1b 100644 --- a/components/ui/8bit/menubar.tsx +++ b/components/ui/8bit/menubar.tsx @@ -8,6 +8,8 @@ import { Circle } from "lucide-react"; import { cn } from "@/lib/utils"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; + import "./styles/retro.css"; export const menubarVariants = cva("", { @@ -110,25 +112,7 @@ const MenubarSubTrigger = React.forwardRef< {...props} > {children} - - - - - - - - - + )); MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; diff --git a/components/ui/8bit/pagination.tsx b/components/ui/8bit/pagination.tsx index ade7d452..c69dcc8f 100644 --- a/components/ui/8bit/pagination.tsx +++ b/components/ui/8bit/pagination.tsx @@ -3,6 +3,8 @@ import { MoreHorizontal } from "lucide-react"; import { cn } from "@/lib/utils"; +import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; import { Pagination as ShadcnPagination, PaginationContent as ShadcnPaginationContent, @@ -48,91 +50,6 @@ function Pagination({ ...props }: BitPaginationProps<"nav">) { ); } -const ChevronLeftIcon = () => { - return ( - - - - - - - - - - ); -}; - -const ChevronRightIcon = () => { - return ( - - - - - - - - - - ); -}; - function PaginationContent({ ...props }: BitPaginationProps<"ul">) { const { className, font } = props; return ( diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx index 437b3ed3..367ec6ed 100644 --- a/components/ui/breadcrumb.tsx +++ b/components/ui/breadcrumb.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; -import { ChevronRight, MoreHorizontal } from "lucide-react"; +import { MoreHorizontal } from "lucide-react"; import { cn } from "@/lib/utils"; +import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon"; + function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { return