import { DOM } from "react";

export interface CarouselItemProps {
    imageUrl: string;
    active?: boolean;
}

export const CarouselItem = (props: CarouselItemProps) => {
    return (
        DOM.div({ className: props.active ? "item active" : "item" },
            DOM.img({ alt: "item", src: props.imageUrl })
        )
    );
};

import { DOM } from "react";

interface CarouselItemProps {
    imageUrl: string;
    active?: boolean;
}

export const CarouselItem = (props: CarouselItemProps) => {
    return (
        DOM.div({ className: props.active ? "item active" : "item" },
            DOM.img({ alt: "item", height: 300, src: props.imageUrl, width: 900 })
        )
    );
};

--- 
+++ 
@@ -1,6 +1,6 @@
 import { DOM } from "react";
 
-interface CarouselItemProps {
+export interface CarouselItemProps {
     imageUrl: string;
     active?: boolean;
 }
@@ -8,7 +8,7 @@
 export const CarouselItem = (props: CarouselItemProps) => {
     return (
         DOM.div({ className: props.active ? "item active" : "item" },
-            DOM.img({ alt: "item", height: 300, src: props.imageUrl, width: 900 })
+            DOM.img({ alt: "item", src: props.imageUrl })
         )
     );
 };
Remove hardcoded carousel image dimensions
