142 lines
4.3 KiB
TypeScript
142 lines
4.3 KiB
TypeScript
import { Box, Card, CardHeader, Heading, Divider, CardBody, CardFooter, GridItem, SimpleGrid, Text, Button, Flex, Icon } from '@chakra-ui/react';
|
|
|
|
import React, { useContext } from 'react';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { ipfsGateways } from '../scripts/ipfs';
|
|
|
|
import { Book, Row } from '../scripts/searcher';
|
|
|
|
import { filesize as formatFileSize } from 'filesize';
|
|
import { TbChevronUp } from 'react-icons/tb';
|
|
import ExternalLink from './ExternalLink';
|
|
import Description from './Description';
|
|
import IpfsDownloadButton from './IpfsDownloadButton';
|
|
|
|
interface IProps {
|
|
row: Row
|
|
}
|
|
|
|
const BookDetailsCard: React.FC<IProps> = (props) => {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const { row } = props
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
author,
|
|
publisher,
|
|
extension,
|
|
filesize,
|
|
language,
|
|
year,
|
|
pages,
|
|
isbn,
|
|
ipfs_cid
|
|
} = row.original;
|
|
|
|
const searchOnAnnasArchive = () => {
|
|
return (`https://annas-archive.org/search?q=` + encodeURIComponent(`${title} ${author}`));
|
|
}
|
|
|
|
return (
|
|
<Card mt={{ base: 1, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
|
|
<CardHeader>
|
|
<Flex
|
|
align="center"
|
|
flexWrap={{ base: 'wrap', lg: 'nowrap' }}
|
|
justify="space-between"
|
|
gap={{ base: '4', lg: '2' }}
|
|
>
|
|
<Heading as="h3" fontSize={['xl', '2xl', '2xl']} whiteSpace="break-spaces" minW="0">
|
|
{title}
|
|
</Heading>
|
|
<Flex gap="2">
|
|
<Button
|
|
as={ExternalLink}
|
|
minWidth="unset"
|
|
href={searchOnAnnasArchive()}
|
|
>
|
|
{t('input.anna_archive')}
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</CardHeader>
|
|
<Divider />
|
|
<CardBody>
|
|
<SimpleGrid columns={{ sm: 1, md: 3, lg: 4 }} spacing={{ base: 2, md: 4 }}>
|
|
<Description name={`Id: `}>{id}</Description>
|
|
<GridItem colSpan={{ sm: 1, md: 2, lg: 3 }}>
|
|
<Description name={`${t('book.ipfs_cid') ?? 'IPFS CID'}: `}>
|
|
{ipfs_cid}
|
|
</Description>
|
|
</GridItem>
|
|
<Description name={`${t('book.author') ?? 'Author'}: `}>{author}</Description>
|
|
<Description name={`${t('book.publisher') ?? 'Publisher'}: `}>
|
|
{publisher || t('book.unknown') || 'Unknown'}
|
|
</Description>
|
|
<Description name={`${t('book.extension') ?? 'Extension'}: `}>
|
|
{extension}
|
|
</Description>
|
|
<Description name={`${t('book.filesize') ?? 'Filesize'}: `}>
|
|
{formatFileSize(filesize) as string}
|
|
</Description>
|
|
<Description name={`${t('book.language') ?? 'Language'}: `}>
|
|
<Text as="span" textTransform="capitalize">
|
|
{language}
|
|
</Text>
|
|
</Description>
|
|
<Description name={`${t('book.year') ?? 'Year'}: `}>
|
|
{year || t('book.unknown') || 'Unknown'}
|
|
</Description>
|
|
<Description name={`${t('book.pages') ?? 'Pages'}: `}>
|
|
{pages || t('book.unknown') || 'Unknown'}
|
|
</Description>
|
|
<Description name={`${t('book.isbn') ?? 'ISBN'}: `}>
|
|
{isbn || t('book.unknown') || 'Unknown'}
|
|
</Description>
|
|
</SimpleGrid>
|
|
</CardBody>
|
|
<CardFooter flexDirection="column">
|
|
|
|
<SimpleGrid columns={{ sm: 2, md: 3, lg: 4, xl: 5 }} spacing={{ base: 2, md: 4 }}>
|
|
|
|
<IpfsDownloadButton book={row.original as Book} onlyIcon={false}></IpfsDownloadButton>
|
|
|
|
{/* {ipfsGateways.map((gateway) => (
|
|
<Button
|
|
as={ExternalLink}
|
|
href={downloadLinkFromIPFS(gateway, row.original)}
|
|
key={gateway}
|
|
variant="outline"
|
|
>
|
|
{gateway}
|
|
</Button>
|
|
))} */}
|
|
|
|
</SimpleGrid>
|
|
|
|
<Flex><Text mt={2} mb={-2} fontSize={'2xs'} fontStyle={'italic'} fontWeight={'light'}>{t('disclaimer.broken_link')}</Text></Flex>
|
|
|
|
<Flex justify="flex-end">
|
|
<Button
|
|
variant="unstyled"
|
|
onClick={() => row.toggleExpanded(false)}
|
|
color="gray.500"
|
|
mt={2}
|
|
mb={-2}
|
|
>
|
|
{t('table.collapse')}
|
|
<Icon as={TbChevronUp} boxSize={4} position="relative" top={0.5} left={1} />
|
|
</Button>
|
|
</Flex>
|
|
</CardFooter>
|
|
</Card >
|
|
);
|
|
};
|
|
|
|
export default BookDetailsCard;
|