diff --git a/apps/nextjs/src/app/(app)/account/layout.tsx b/apps/nextjs/src/app/(app)/account/layout.tsx index 65c9b7e1..9b06c4ec 100644 --- a/apps/nextjs/src/app/(app)/account/layout.tsx +++ b/apps/nextjs/src/app/(app)/account/layout.tsx @@ -35,7 +35,9 @@ export default function RootLayout({
{children} diff --git a/apps/nextjs/src/app/(app)/page.tsx b/apps/nextjs/src/app/(app)/page.tsx index 1f2af4b7..2ea1f4e2 100644 --- a/apps/nextjs/src/app/(app)/page.tsx +++ b/apps/nextjs/src/app/(app)/page.tsx @@ -57,8 +57,8 @@ export default async function Home() { ))} - - + +
diff --git a/apps/nextjs/src/app/_components/SideMenu.tsx b/apps/nextjs/src/app/_components/SideMenu.tsx index e4cb6776..8acbd1b3 100644 --- a/apps/nextjs/src/app/_components/SideMenu.tsx +++ b/apps/nextjs/src/app/_components/SideMenu.tsx @@ -80,7 +80,7 @@ const Sidebar = () => {
@@ -93,50 +93,51 @@ const Sidebar = () => { -
-
-
- -
- {menu.map((item, index) => { - return ( - - ); - })} -
- + + {item.name} + + + ); + })} +
+ -
- {/*
*/} +
+ {/*
*/} - + - {/*
+ {/*
{social.map((item, index) => { return ( @@ -145,6 +146,7 @@ const Sidebar = () => { ); })}
*/} +
diff --git a/apps/ui/src/components/ui/carousel.tsx b/apps/ui/src/components/ui/carousel.tsx index 28d82d5f..e70d6f42 100644 --- a/apps/ui/src/components/ui/carousel.tsx +++ b/apps/ui/src/components/ui/carousel.tsx @@ -1,44 +1,44 @@ -"use client" +"use client"; -import * as React from "react" -import useEmblaCarousel from "embla-carousel-react" +import * as React from "react"; +import useEmblaCarousel from "embla-carousel-react"; import type { UseEmblaCarouselType } from "embla-carousel-react"; -import { ArrowLeft, ArrowRight } from "lucide-react" +import { ArrowLeft, ArrowRight } from "lucide-react"; -import { cn } from "@realms-world/utils" -import { Button } from "./button" +import { cn } from "@realms-world/utils"; +import { Button } from "./button"; -type CarouselApi = UseEmblaCarouselType[1] -type UseCarouselParameters = Parameters -type CarouselOptions = UseCarouselParameters[0] -type CarouselPlugin = UseCarouselParameters[1] +type CarouselApi = UseEmblaCarouselType[1]; +type UseCarouselParameters = Parameters; +type CarouselOptions = UseCarouselParameters[0]; +type CarouselPlugin = UseCarouselParameters[1]; interface CarouselProps { - opts?: CarouselOptions - plugins?: CarouselPlugin - orientation?: "horizontal" | "vertical" - setApi?: (api: CarouselApi) => void + opts?: CarouselOptions; + plugins?: CarouselPlugin; + orientation?: "horizontal" | "vertical"; + setApi?: (api: CarouselApi) => void; } type CarouselContextProps = { - carouselRef: ReturnType[0] - api: ReturnType[1] - scrollPrev: () => void - scrollNext: () => void - canScrollPrev: boolean - canScrollNext: boolean -} & CarouselProps + carouselRef: ReturnType[0]; + api: ReturnType[1]; + scrollPrev: () => void; + scrollNext: () => void; + canScrollPrev: boolean; + canScrollNext: boolean; +} & CarouselProps; -const CarouselContext = React.createContext(null) +const CarouselContext = React.createContext(null); function useCarousel() { - const context = React.useContext(CarouselContext) + const context = React.useContext(CarouselContext); if (!context) { - throw new Error("useCarousel must be used within a ") + throw new Error("useCarousel must be used within a "); } - return context + return context; } const Carousel = React.forwardRef< @@ -55,69 +55,69 @@ const Carousel = React.forwardRef< children, ...props }, - ref + ref, ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, - plugins - ) - const [canScrollPrev, setCanScrollPrev] = React.useState(false) - const [canScrollNext, setCanScrollNext] = React.useState(false) + plugins, + ); + const [canScrollPrev, setCanScrollPrev] = React.useState(false); + const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { - return + return; } - setCanScrollPrev(api.canScrollPrev()) - setCanScrollNext(api.canScrollNext()) - }, []) + setCanScrollPrev(api.canScrollPrev()); + setCanScrollNext(api.canScrollNext()); + }, []); const scrollPrev = React.useCallback(() => { - api?.scrollPrev() - }, [api]) + api?.scrollPrev(); + }, [api]); const scrollNext = React.useCallback(() => { - api?.scrollNext() - }, [api]) + api?.scrollNext(); + }, [api]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { - event.preventDefault() - scrollPrev() + event.preventDefault(); + scrollPrev(); } else if (event.key === "ArrowRight") { - event.preventDefault() - scrollNext() + event.preventDefault(); + scrollNext(); } }, - [scrollPrev, scrollNext] - ) + [scrollPrev, scrollNext], + ); React.useEffect(() => { if (!api || !setApi) { - return + return; } - setApi(api) - }, [api, setApi]) + setApi(api); + }, [api, setApi]); React.useEffect(() => { if (!api) { - return + return; } - onSelect(api) - api.on("reInit", onSelect) - api.on("select", onSelect) + onSelect(api); + api.on("reInit", onSelect); + api.on("select", onSelect); return () => { - api.off("select", onSelect) - } - }, [api, onSelect]) + api.off("select", onSelect); + }; + }, [api, onSelect]); return ( - ) - } -) -Carousel.displayName = "Carousel" + ); + }, +); +Carousel.displayName = "Carousel"; const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const { carouselRef, orientation } = useCarousel() + const { carouselRef, orientation } = useCarousel(); return (
@@ -162,20 +162,20 @@ const CarouselContent = React.forwardRef< className={cn( "flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", - className + className, )} {...props} />
- ) -}) -CarouselContent.displayName = "CarouselContent" + ); +}); +CarouselContent.displayName = "CarouselContent"; const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const { orientation } = useCarousel() + const { orientation } = useCarousel(); return (
- ) -}) -CarouselItem.displayName = "CarouselItem" + ); +}); +CarouselItem.displayName = "CarouselItem"; const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { - const { orientation, scrollPrev, canScrollPrev } = useCarousel() + const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( - ) -}) -CarouselPrevious.displayName = "CarouselPrevious" + ); +}); +CarouselPrevious.displayName = "CarouselPrevious"; const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { - const { orientation, scrollNext, canScrollNext } = useCarousel() + const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( - ) -}) -CarouselNext.displayName = "CarouselNext" + ); +}); +CarouselNext.displayName = "CarouselNext"; export { type CarouselApi, @@ -258,4 +258,4 @@ export { CarouselItem, CarouselPrevious, CarouselNext, -} +};