76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
"use client";
|
|
import { ChapterItem } from "@/app/utils/chapter";
|
|
import React, { useMemo } from "react";
|
|
import { Card, CardHeader, Chip, Divider, CardBody, Button } from "@nextui-org/react"
|
|
import classNames from "classnames";
|
|
import { Icon } from "@iconify/react";
|
|
|
|
export interface ChapterCardProps {
|
|
chapter:ChapterItem
|
|
active:boolean
|
|
onPress?:()=>void
|
|
onMergeNext?:(chapter:ChapterItem)=>void
|
|
}
|
|
|
|
export const ChapterCard:React.FC<ChapterCardProps> = (props) => {
|
|
|
|
const chapterCardTitle = useMemo(()=>{
|
|
return [
|
|
`Chapter ${props.chapter.number}`,
|
|
props.chapter.title
|
|
].filter(item=>!!item).join(' - ')
|
|
},[props.chapter])
|
|
|
|
return (
|
|
<Card
|
|
isPressable
|
|
className={classNames('max-w-[384px] border-1 border-divider/15',{
|
|
"bg-themeBlue/20":props.active
|
|
})}
|
|
shadow="none"
|
|
onPress={props.onPress}
|
|
>
|
|
<CardHeader className="flex items-center justify-between">
|
|
<div className="flex gap-1.5">
|
|
{
|
|
props.active && (
|
|
<Chip
|
|
className="mr-1 text-themeBlue bg-themeBlue/20"
|
|
radius="sm"
|
|
size="sm"
|
|
variant="flat"
|
|
>
|
|
Editing
|
|
</Chip>
|
|
)
|
|
}
|
|
<p className="text-left mr-1">
|
|
{chapterCardTitle}
|
|
</p>
|
|
</div>
|
|
{
|
|
!!props.onMergeNext && (
|
|
<Icon
|
|
icon="material-symbols:cell-merge"
|
|
width={16}
|
|
onClick={()=>{
|
|
props.onMergeNext?.(props.chapter)
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
|
|
</CardHeader>
|
|
|
|
<Divider />
|
|
<CardBody>
|
|
<p className="line-clamp-2">
|
|
{
|
|
props.chapter.text.trim().slice(0,300)
|
|
}
|
|
</p>
|
|
</CardBody>
|
|
</Card>
|
|
)
|
|
} |