53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { Copy, Plus } from "lucide-react";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { IBlock, INote } from "@/lib/db/schema";
|
|
import { createBlock } from "@/app/actions/blocks";
|
|
import IconOnlyButton from "../ui/IconOnlyButton";
|
|
import Block from "./Block";
|
|
|
|
const defaultNoteId = uuidv4();
|
|
|
|
const defaultNote: INote = {
|
|
id: defaultNoteId,
|
|
title: "Untitled",
|
|
creationTime: new Date(),
|
|
lastEdited: new Date(),
|
|
authorId: uuidv4(),
|
|
};
|
|
|
|
const defaultBlocks: IBlock[] = [
|
|
{
|
|
id: uuidv4(),
|
|
tag: "",
|
|
lines: ["", "", "", ""],
|
|
isLocked: false,
|
|
order: 1,
|
|
noteId: defaultNoteId,
|
|
},
|
|
];
|
|
|
|
export default function Editor({
|
|
note = defaultNote,
|
|
blocks = defaultBlocks,
|
|
}: {
|
|
note?: INote;
|
|
blocks?: IBlock[];
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center max-w-2xl w-full gap-4">
|
|
<input
|
|
className="font-bold text-xl w-full text-center focus:outline-none"
|
|
defaultValue={note.title}
|
|
/>
|
|
{blocks.map((block) => <Block key={block.id} block={block} /> )}
|
|
<div className="flex gap-2">
|
|
<form action={createBlock}>
|
|
<input type="hidden" name="noteId" value={note.id} />
|
|
<IconOnlyButton icon={<Plus size={24} />} type="submit" />
|
|
</form>
|
|
<IconOnlyButton icon={<Copy size={24} />} title="Copy note to clipboard" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|