65 lines
No EOL
1.9 KiB
TypeScript
65 lines
No EOL
1.9 KiB
TypeScript
import { Inter } from '@next/font/google'
|
|
import { Character } from '../utils/types'
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
import { Container, Card, Col, Text } from "@nextui-org/react";
|
|
|
|
export const CharacterCard = (props: Character) => (
|
|
<Container draggable
|
|
css={{ h: "auto", $$cardColor: '$colors$primary' }}>
|
|
|
|
<Card
|
|
isPressable isHoverable >
|
|
<Card.Footer
|
|
isBlurred
|
|
css={{
|
|
position: "absolute",
|
|
bgBlur: "#0f111466",
|
|
borderTop: "$borderWeights$light solid $gray800",
|
|
bottom: 0,
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<Col>
|
|
<Text size={14} weight="bold" transform="uppercase" color="#ffffffAA">
|
|
{props.species}
|
|
</Text>
|
|
<Text h4 color="white">
|
|
{props.name}
|
|
</Text>
|
|
</Col>
|
|
</Card.Footer>
|
|
|
|
<Card.Image
|
|
src={props.image}
|
|
objectFit="cover"
|
|
css={{
|
|
objectPosition: "0 20%"
|
|
}}
|
|
width="100%"
|
|
height={220}
|
|
alt="Card image background"
|
|
/>
|
|
|
|
</Card>
|
|
</Container >
|
|
);
|
|
|
|
// const CharacterCard = (props: Character) => {
|
|
|
|
// return (
|
|
|
|
|
|
// <a key={props.id} href={`character/${props.booru_tag}`} className={styles.card} target="_blank" rel="noopener noreferrer">
|
|
// <img src={props.image} alt={''} />
|
|
|
|
// <h2 className={inter.className}>
|
|
// {props.name} <span>-></span>
|
|
// </h2>
|
|
// <p className={inter.className}>
|
|
// {props.species}
|
|
// </p>
|
|
// </a>
|
|
// )
|
|
// }
|
|
|
|
export default CharacterCard |