82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
import { Card, Flex, Box, Text, Tag } from '@chakra-ui/react';
|
|
|
|
import React, { useState } from 'react';
|
|
import { colorSchemes } from '../constants/color';
|
|
|
|
import { Book } from '../scripts/searcher';
|
|
import BookDetailsCard from './BooksDetailsCard';
|
|
|
|
import { filesize as formatFileSize } from 'filesize';
|
|
|
|
interface IProps {
|
|
book: Book
|
|
}
|
|
|
|
const DesktopDataListElement: React.FC<IProps> = (props) => {
|
|
const { book } = props
|
|
|
|
const languageColorScheme = colorSchemes[book.language.length % colorSchemes.length];
|
|
const extensionColorScheme = colorSchemes[book.extension.charCodeAt(0) % colorSchemes.length];
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(false)
|
|
|
|
return (
|
|
<>
|
|
<div onClick={() => { setIsOpen(true) }}>
|
|
|
|
<Card cursor={'pointer'} backgroundColor={'transparent'} mt={{ base: 0, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
|
|
|
|
<Flex justifyContent={'space-between'} alignItems={'center'}>
|
|
<Box flex={10} p='4'>
|
|
<Text marginBottom={1} fontSize="lg">
|
|
{book.title}
|
|
</Text>
|
|
</Box>
|
|
<Box flex={6} p='4'>
|
|
<Text marginBottom={1} color={'gray.600'} fontSize="xs">
|
|
{book.author}
|
|
</Text>
|
|
</Box>
|
|
<Box flex={4} p='4'>
|
|
<Text marginBottom={1} color={'gray.400'} fontSize="xs">
|
|
{book.publisher}
|
|
</Text>
|
|
</Box>
|
|
<Box flex={2} p='4'>
|
|
<Tag colorScheme={extensionColorScheme}>{book.extension}</Tag>
|
|
</Box>
|
|
<Box flex={3} p='4'>
|
|
<Text marginBottom={1} color={'gray.400'} fontSize="xs">
|
|
{formatFileSize(book.filesize) as string}
|
|
</Text>
|
|
</Box>
|
|
<Box flex={2} p='4'>
|
|
<Tag colorScheme={languageColorScheme} textTransform="capitalize">{book.language}</Tag>
|
|
</Box>
|
|
<Box flex={2} p='4'>
|
|
<Text marginBottom={1} color={'gray.400'} fontSize="xs">
|
|
{book.year}
|
|
</Text>
|
|
</Box>
|
|
<Box flex={2} p='4'>
|
|
<Text marginBottom={1} color={'gray.400'} fontSize="xs">
|
|
{book.pages}
|
|
</Text>
|
|
</Box>
|
|
</Flex>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
{isOpen &&
|
|
<BookDetailsCard row={{
|
|
original: book,
|
|
toggleExpanded: setIsOpen
|
|
}} />}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DesktopDataListElement; |