125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
import { 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';
|
|
|
|
interface IProps {
|
|
row: Row
|
|
}
|
|
|
|
const BookDetailsCard: React.FC<IProps> = (props) => {
|
|
|
|
const downloadLinkFromIPFS = (gateway: string, book: Book) => {
|
|
return (
|
|
`https://${gateway}/ipfs/${book.ipfs_cid}?filename=` +
|
|
encodeURIComponent(`${book.title}_${book.author}.${book.extension}`)
|
|
);
|
|
}
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const { row } = props
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
author,
|
|
publisher,
|
|
extension,
|
|
filesize,
|
|
language,
|
|
year,
|
|
pages,
|
|
isbn,
|
|
ipfs_cid
|
|
} = row.original;
|
|
|
|
return (
|
|
<Card mt={{ base: 1, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
|
|
<CardHeader>
|
|
<Heading as="h3" fontSize="xl">
|
|
{title}
|
|
</Heading>
|
|
</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 }}>
|
|
{ipfsGateways.map((gateway) => (
|
|
<Button
|
|
as={ExternalLink}
|
|
href={downloadLinkFromIPFS(gateway, row.original)}
|
|
key={gateway}
|
|
variant="outline"
|
|
>
|
|
{gateway}
|
|
</Button>
|
|
))}
|
|
|
|
</SimpleGrid>
|
|
|
|
{/* <Flex><Text fontWeight={'bold'}>{t('disclaimer.nolink_warning')}</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;
|