Merge pull request midday-ai#245 from midday-ai/feature/widgets-v3

Widgets
MediaQuad · Sep 4, 2024 · 939725d · 939725d
2 parents bae9915 + 055fead
commit 939725d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 29 deletions.
diff --git a/apps/dashboard/src/components/charts/bar-chart.tsx b/apps/dashboard/src/components/charts/bar-chart.tsx
@@ -104,8 +104,6 @@ const ToolTipContent = ({ payload = {} }) => {
 };
 
 export function BarChart({ data, height = 290 }) {
-  const locale = useCurrentLocale();
-
   const formattedData = data.result.map((item) => ({
     ...item,
     meta: data.meta,
@@ -116,7 +114,7 @@ export function BarChart({ data, height = 290 }) {
   }));
 
   return (
-    <div className="relative">
+    <div className="relative h-full w-full">
       <div className="space-x-4 absolute right-0 -top-10 hidden md:flex">
         <div className="flex space-x-2 items-center">
           <span className="w-2 h-2 rounded-full bg-[#121212] dark:bg-[#F5F5F3]" />

diff --git a/apps/dashboard/src/components/widgets.tsx b/apps/dashboard/src/components/widgets.tsx
@@ -1,3 +1,10 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@midday/ui/carousel";
 import * as React from "react";
 import { Spending } from "./charts/spending";
 import { Transactions } from "./charts/transactions";
@@ -35,10 +42,29 @@ export function Widgets({ disabled, initialPeriod, searchParams }: Props) {
   ];
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
-      {items.map((item, idx) => {
-        return <div key={idx.toString()}>{item}</div>;
-      })}
-    </div>
+    <Carousel
+      className="flex flex-col"
+      opts={{
+        align: "start",
+      }}
+    >
+      <div className="ml-auto hidden md:flex">
+        <CarouselPrevious className="static p-0 border-none hover:bg-transparent" />
+        <CarouselNext className="static p-0 border-none hover:bg-transparent" />
+      </div>
+
+      <CarouselContent className="-ml-[20px] 2xl:-ml-[40px] flex-col md:flex-row space-y-6 md:space-y-0">
+        {items.map((item, idx) => {
+          return (
+            <CarouselItem
+              className="lg:basis-1/2 xl:basis-1/3 3xl:basis-1/4 pl-[20px] 2xl:pl-[40px]"
+              key={idx.toString()}
+            >
+              {item}
+            </CarouselItem>
+          );
+        })}
+      </CarouselContent>
+    </Carousel>
   );
 }
diff --git a/packages/ui/src/components/carousel.tsx b/packages/ui/src/components/carousel.tsx
@@ -4,6 +4,7 @@ import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react";
 import * as React from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { cn } from "../utils";
 import { Button } from "./button";
 import { Icons } from "./icons";
@@ -56,14 +57,14 @@ const Carousel = React.forwardRef<
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
-      plugins
+      plugins,
     );
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
@@ -89,21 +90,11 @@ const Carousel = React.forwardRef<
       (index: number) => {
         api?.scrollTo(index);
       },
-      [api]
+      [api],
     );
 
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext]
-    );
+    useHotkeys("left", scrollPrev);
+    useHotkeys("right", scrollNext);
 
     React.useEffect(() => {
       if (!api || !setApi) {
@@ -144,7 +135,6 @@ const Carousel = React.forwardRef<
       >
         <div
           ref={ref}
-          onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
@@ -154,7 +144,7 @@ const Carousel = React.forwardRef<
         </div>
       </CarouselContext.Provider>
     );
-  }
+  },
 );
 Carousel.displayName = "Carousel";
 
@@ -171,7 +161,7 @@ const CarouselContent = React.forwardRef<
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+          className,
         )}
         {...props}
       />
@@ -194,7 +184,7 @@ const CarouselItem = React.forwardRef<
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -218,7 +208,7 @@ const CarouselPrevious = React.forwardRef<
         orientation === "horizontal"
           ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -248,7 +238,7 @@ const CarouselNext = React.forwardRef<
         orientation === "horizontal"
           ? "-right-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}