|
- import {FC, FormEventHandler} from 'react';
- import styled from 'styled-components';
- import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder'
- import Link from '../../molecules/navigation/Link';
- import {Session} from '@auth0/nextjs-auth0';
- import {models} from '@tonality/library-common';
- import RingtoneCardDisplay from '../../organisms/presentation/RingtoneCardDisplay';
- import Card from '../../molecules/presentation/Card';
- import ActionButton from '../../molecules/forms/ActionButton';
- import NumericInput from '../../molecules/forms/NumericInput';
- import BasicLayout from '../../organisms/presentation/BasicLayout';
-
- const CardList = styled('div')({
- display: 'grid',
- gap: '1rem',
- margin: '2rem 0',
- '@media (min-width: 720px)': {
- gridTemplateColumns: 'repeat(2, 1fr)',
- },
- })
-
- const CardLink = styled(Link)({
- display: 'block',
- textDecoration: 'none',
- })
-
- const StyledCard = styled(Card)({
- height: '100%',
- })
-
- const Footer = styled('div')({
- display: 'grid',
- gap: '1rem',
- gridTemplateColumns: '1fr',
- margin: '2rem 0',
- '@media (min-width: 720px)': {
- gridTemplateColumns: 'auto 1fr auto',
- },
- })
-
- const TakeForm = styled('form')({
- display: 'grid',
- gap: '1rem',
- gridTemplateColumns: '1fr auto',
- })
-
- const BrowseArea = styled('div')({
- '@media (min-width: 720px)': {
- gridColumn: 3,
- },
- })
-
- const TakeInput = styled(NumericInput)({
- '@media (min-width: 720px)': {
- width: '6rem',
- },
- })
-
- type Props = {
- onSearch?: FormEventHandler,
- onNextPage?: FormEventHandler,
- session?: Partial<Session>,
- ringtones: models.Ringtone[],
- skip?: number,
- take?: number,
- total?: number,
- loading?: boolean,
- }
-
- const BrowseRingtonesTemplate: FC<Props> = ({
- onSearch,
- session,
- ringtones,
- skip = 0,
- take = 10,
- total = 0,
- onNextPage,
- loading,
- }) => {
- return (
- <BasicLayout
- onSearch={onSearch}
- session={session}
- >
- <LeftSidebarWithMenu.ContentContainer>
- {
- Array.isArray(ringtones)
- && (
- <>
- <CardList>
- {ringtones.map(r => (
- <CardLink
- key={r.id.toString()}
- href={{
- pathname: '/ringtones/[id]',
- query: {
- id: r.id.toString(),
- },
- }}
- >
- <StyledCard>
- <RingtoneCardDisplay
- name={r.name}
- data={r.data}
- createdAt={r.createdAt}
- />
- </StyledCard>
- </CardLink>
- ))}
- </CardList>
- <Footer>
- <TakeForm>
- <TakeInput
- label="Visible Items"
- name="take"
- defaultValue={take}
- />
- <ActionButton
- type="submit"
- disabled={loading}
- >
- Set
- </ActionButton>
- </TakeForm>
- <BrowseArea>
- {
- skip + take < total
- && (
- <form
- onSubmit={onNextPage}
- >
- <input
- type="hidden"
- name="skip"
- value={skip + take}
- />
- <input
- type="hidden"
- name="take"
- value={take}
- />
- <ActionButton
- type="submit"
- disabled={loading}
- block
- >
- Browse More
- </ActionButton>
- </form>
- )
- }
- </BrowseArea>
- </Footer>
- </>
- )
- }
- </LeftSidebarWithMenu.ContentContainer>
- </BasicLayout>
- )
- }
-
- export default BrowseRingtonesTemplate
|