46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import ListButton from "@/components/list-button"
|
|
import Sheet from "@/components/sheet/sheet"
|
|
import { useSheet } from "@/hooks/use-sheet"
|
|
import { ListIcon } from "@phosphor-icons/react"
|
|
import { useTournament } from "../../queries"
|
|
import { useEditor } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import { RichTextEditor } from '@mantine/tiptap';
|
|
import { Button, Stack } from "@mantine/core"
|
|
|
|
interface RulesListButtonProps {
|
|
tournamentId: string;
|
|
}
|
|
|
|
const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
|
|
const { data: tournament } = useTournament(tournamentId);
|
|
const { open, isOpen, toggle } = useSheet();
|
|
|
|
const editor = useEditor({
|
|
extensions: [StarterKit],
|
|
content: tournament?.rules || '',
|
|
editable: false,
|
|
immediatelyRender: false,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<ListButton
|
|
label={`View Rules`}
|
|
Icon={ListIcon}
|
|
onClick={open}
|
|
/>
|
|
|
|
<Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
|
|
<Stack gap="xs">
|
|
<RichTextEditor editor={editor}>
|
|
<RichTextEditor.Content />
|
|
</RichTextEditor>
|
|
<Button variant="subtle" c="red" onClick={toggle}>Close</Button>
|
|
</Stack>
|
|
</Sheet>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RulesListButton; |