gallery linting fixed

shawnmclean · Dec 17, 2024 · 28afee3 · 28afee3
1 parent 29d8d0d
commit 28afee3
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 75 deletions.
diff --git a/apps/sovoli.com/src/app/[username]/[slug]/components/Gallery.tsx b/apps/sovoli.com/src/app/[username]/[slug]/components/Gallery.tsx
@@ -24,10 +24,8 @@ export function Gallery({ images }: GalleryProps) {
       <Image
         src={images[0].src}
         alt={images[0].alt || "Image"}
-        style={{ width: "100%", height: "auto" }}
         className="object-cover"
-        width={16}
-        height={9}
+        fill
         as={NextImage}
         loader={supabaseLoader}
       />
@@ -42,8 +40,7 @@ export function Gallery({ images }: GalleryProps) {
               src={image.src}
               alt={image.alt || "Image"}
               className="h-auto max-h-[600px] w-auto object-contain"
-              width={16}
-              height={9}
+              fill
               as={NextImage}
               loader={supabaseLoader}
             />

diff --git a/apps/sovoli.com/src/app/[username]/[slug]/layout.tsx b/apps/sovoli.com/src/app/[username]/[slug]/layout.tsx
@@ -9,13 +9,7 @@ interface Props {
   children: React.ReactNode;
   params: Promise<{ username: string; slug: string }>;
 }
-export default async function Layout(props: Props) {
-  const params = await props.params;
-
-  const {
-    children
-  } = props;
-
+export default async function Layout({ params, children }: Props) {
   const { username, slug } = await params;
 
   // temp hack since I no longer have a chatgpt account and using my account instead (migrated data)

diff --git a/packages/ui/src/components/ui/carousel/index.tsx b/packages/ui/src/components/ui/carousel/index.tsx
@@ -6,7 +6,7 @@ import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { tv } from "tailwind-variants";
 
-import { Button } from "../button";
+import { Button, ButtonProps } from "../button";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -235,72 +235,72 @@ const CarouselItem = React.forwardRef<
 });
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(
-  (
-    { className, variant = "faded", isIconOnly = true, size = "sm", ...props },
-    ref,
-  ) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+const CarouselPrevious = ({
+  className,
+  variant = "faded",
+  isIconOnly = true,
+  size = "sm",
+  ref,
+  ...props
+}: ButtonProps) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      isIconOnly={isIconOnly}
+      className={arrowButtonStyles({
+        orientation,
+        position: orientation === "horizontal" ? "left" : "top",
+        visibility: canScrollPrev ? "visible" : "hidden",
+        className,
+      })}
+      disabled={!canScrollPrev}
+      onPress={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+};
 
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        isIconOnly={isIconOnly}
-        className={arrowButtonStyles({
-          orientation,
-          position: orientation === "horizontal" ? "left" : "top",
-          visibility: canScrollPrev ? "visible" : "hidden",
-          className,
-        })}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeft className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(
-  (
-    { className, variant = "faded", isIconOnly = true, size = "sm", ...props },
-    ref,
-  ) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
+const CarouselNext = ({
+  className,
+  variant = "faded",
+  isIconOnly = true,
+  size = "sm",
+  ref,
+  ...props
+}: ButtonProps) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      isIconOnly={isIconOnly}
+      size={size}
+      className={arrowButtonStyles({
+        orientation,
+        position: orientation === "horizontal" ? "right" : "bottom",
+        visibility: canScrollNext ? "visible" : "hidden",
+        className,
+      })}
+      disabled={!canScrollNext}
+      onPress={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+};
 
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        isIconOnly={isIconOnly}
-        size={size}
-        className={arrowButtonStyles({
-          orientation,
-          position: orientation === "horizontal" ? "right" : "bottom",
-          visibility: canScrollNext ? "visible" : "hidden",
-          className,
-        })}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRight className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
 CarouselNext.displayName = "CarouselNext";
 
 export {