9c559d7304
Live preview e2e tests had no CSS when tested against prod. For all our other tests, we have a separate test/app directory that imports CSS. Otherwise, the root-level /app directory is used. For live-preview, we currently always run against test/live-preview/app, that has no CSS import. This PR adds a new test/live-preview/prod/app directory that imports CSS and is used when we run tests against prod. In order for this to work, I had to make import map generation smarter
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
import { Chevron } from '../Chevron/index.js'
|
|
import classes from './index.module.scss'
|
|
|
|
export const Pagination: React.FC<{
|
|
className?: string
|
|
onClick: (page: number) => void
|
|
page: number
|
|
totalPages: number
|
|
}> = (props) => {
|
|
const { className, onClick, page, totalPages } = props
|
|
const hasNextPage = page < totalPages
|
|
const hasPrevPage = page > 1
|
|
|
|
return (
|
|
<div className={[classes.pagination, className].filter(Boolean).join(' ')}>
|
|
<button
|
|
className={classes.button}
|
|
disabled={!hasPrevPage}
|
|
onClick={() => {
|
|
onClick(page - 1)
|
|
}}
|
|
type="button"
|
|
>
|
|
<Chevron className={classes.icon} rotate={90} />
|
|
</button>
|
|
<div className={classes.pageRange}>
|
|
<span className={classes.pageRangeLabel}>
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
</div>
|
|
<button
|
|
className={classes.button}
|
|
disabled={!hasNextPage}
|
|
onClick={() => {
|
|
onClick(page + 1)
|
|
}}
|
|
type="button"
|
|
>
|
|
<Chevron className={classes.icon} rotate={-90} />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|