import clsx from "clsx"; import React, { useRef, useState } from "react"; import { ChromePicker } from "react-color"; import { usePagination } from "react-use-pagination"; import bots from "../../static/bots.json"; import { Tag, useFilteredObjs } from "../libs/store"; import Card from "./Card"; import Modal from "./Modal"; import ModalAction from "./ModalAction"; import ModalContent from "./ModalContent"; import ModalTitle from "./ModalTitle"; import Paginate from "./Paginate"; import TagComponent from "./Tag"; export default function Bot(): JSX.Element { const [modalOpen, setModalOpen] = useState(false); const { filter, setFilter, filteredObjs: filteredBots, } = useFilteredObjs(bots); const props = usePagination({ totalItems: filteredBots.length, initialPageSize: 10, }); const { startIndex, endIndex } = props; const currentBots = filteredBots.slice(startIndex, endIndex + 1); const [form, setForm] = useState<{ name: string; desc: string; homepage: string; }>({ name: "", desc: "", homepage: "" }); const ref = useRef(null); const [tags, setTags] = useState([]); const [label, setLabel] = useState(""); const [color, setColor] = useState("#ea5252"); const onSubmit = () => { setModalOpen(false); const title = encodeURIComponent(`Bot: ${form.name}`).replace(/%2B/gi, "+"); const body = encodeURIComponent( ` **机器人名称:** ${form.name} **机器人功能:** ${form.desc} **机器人项目仓库/主页链接:** ${form.homepage} **标签:** ${JSON.stringify(tags)} `.trim() ).replace(/%2B/gi, "+"); window.open( `https://github.com/nonebot/nonebot2/issues/new?title=${title}&body=${body}&labels=Bot` ); }; const onChange = (event) => { const target = event.target; const value = target.type === "checkbox" ? target.checked : target.value; const name = target.name; setForm({ ...form, [name]: value, }); event.preventDefault(); }; const onChangeLabel = (event) => { setLabel(event.target.value); }; const onChangeColor = (color) => { setColor(color.hex); }; const validateTag = () => { return label.length >= 1 && label.length <= 10; }; const newTag = () => { if (tags.length >= 3) { return; } if (validateTag()) { const tag = { label, color }; setTags([...tags, tag]); } }; const delTag = (index: number) => { setTags(tags.filter((_, i) => i !== index)); }; const insertTagType = (text: string) => { setLabel(text + label); ref.current.value = text + label; }; return ( <>
setFilter(event.target.value)} />
{currentBots.map((bot, index) => ( ))}
Type:
); }