43 lines
1021 B
TypeScript
Executable File
43 lines
1021 B
TypeScript
Executable File
import Img from "@moduletrace/twui/layout/Img";
|
|
import { twMerge } from "tailwind-merge";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
|
|
type Props = {
|
|
src: string;
|
|
width?: number;
|
|
height?: number;
|
|
alt?: string;
|
|
};
|
|
|
|
export default function RectImage({
|
|
src,
|
|
height = 300,
|
|
width = 200,
|
|
alt,
|
|
}: Props) {
|
|
const img_component = (
|
|
<Img
|
|
alt={alt || "image"}
|
|
src={src}
|
|
className={twMerge(`w-full h-full object-cover`)}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
className={twMerge(`overflow-hidden hidden xl:flex`)}
|
|
style={{
|
|
width: `${width}px`,
|
|
height: `${height}px`,
|
|
}}
|
|
>
|
|
{img_component}
|
|
</Stack>
|
|
<Stack className={twMerge(`overflow-hidden flex xl:hidden w-full`)}>
|
|
{img_component}
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|