feat: chapter function

components/ChapterCard.tsx

@@ -0,0 +1,76 @@
+"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>
+  )
+}