53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { Card, CardHeader, Tag, Text } from '@chakra-ui/react';
|
|
import React, { useState } from 'react';
|
|
import { colorSchemes } from '../constants/color';
|
|
|
|
import { Book } from '../scripts/searcher';
|
|
import BookDetailsCard from './BooksDetailsCard';
|
|
|
|
interface IProps {
|
|
book: Book
|
|
}
|
|
|
|
const MobileDataListElement: 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 backgroundColor={'transparent'} mt={{ base: 0, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
|
|
<CardHeader>
|
|
<Text marginBottom={1} fontSize="lg">
|
|
{book.title}
|
|
</Text>
|
|
<Text marginBottom={1} color={'gray.400'} fontSize="xs">
|
|
{book.author}
|
|
</Text>
|
|
<div>
|
|
<Tag colorScheme={languageColorScheme} textTransform="capitalize">{book.language}</Tag>
|
|
{" "}
|
|
<Tag colorScheme={extensionColorScheme}>{book.extension}</Tag>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
{isOpen &&
|
|
<BookDetailsCard row={{
|
|
original: book,
|
|
toggleExpanded: setIsOpen
|
|
}} />}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MobileDataListElement;
|