Files
StevenandGitHub 4466ba436b chore(examples): use default prettier for examples/templates (#60530)
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00

71 lines
1.4 KiB
TypeScript

import Carousel from "react-multi-carousel";
import { ResponsiveType } from "react-multi-carousel/lib/types";
import "react-multi-carousel/lib/styles.css";
import Image from "next/image";
const BreakpointSlides: ResponsiveType = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 530 },
items: 2,
},
mobile: {
breakpoint: { max: 530, min: 0 },
items: 1,
},
};
export default function Page() {
return (
<Carousel
responsive={BreakpointSlides}
ssr
infinite
itemClass="carousel-item"
autoPlay
>
<Image
alt="Gundam"
src="/brucetang.jpg"
priority
layout="responsive"
width={700}
height={475}
/>
<Image
alt="Musgo"
src="/cameronsmith.jpg"
priority
layout="responsive"
width={700}
height={475}
/>
<Image
alt="Valley"
src="/ganapathykumar.jpg"
priority
layout="responsive"
width={700}
height={475}
/>
<Image
alt="Beach"
src="/roanlavery.jpg"
layout="responsive"
width={700}
height={475}
/>
<Image
alt="Torii"
src="/tianshuliu.jpg"
layout="responsive"
width={700}
height={475}
/>
</Carousel>
);
}