Jeroen Reumkens PRO
Preview
/**
// Credits for the pictures:
// https://unsplash.com/photos/assorted-candies-and-chocolate-pack-VklmASEqBvQ
// https://unsplash.com/photos/assorted-color-abstract-painting-tZc3vjPCk-Q
// https://unsplash.com/photos/person-using-marshall-headphones-jmZ6QjvJjvk
*/
export const App = () => {
return (
<div>
<div className="slider-container">
<Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/candy.webp" />
<Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/sketch.webp" />
<Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/agency.webp" />
</div>
</div>
);
};
type SlideProps = {
imageSrc: string;
};
const Slide = ({ imageSrc }: SlideProps) => (
<div className="slide">
<img src={imageSrc} />
<a href="#">
View case <ArrowRight />
</a>
</div>
);
const ArrowRight = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);