46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { SetStateAction } from "react";
|
|
// @ts-ignore
|
|
import FolderPlusIcon from "@assets/fontawesome/svg/folder-plus.svg?react";
|
|
// @ts-ignore
|
|
import TagsIcon from "@assets/fontawesome/svg/tags.svg?react";
|
|
// @ts-ignore
|
|
import FileCirclePlusIcon from "@assets/fontawesome/svg/file-circle-plus.svg?react";
|
|
import { useUIStore } from "@/stores/uiStore";
|
|
import { useCreateNote } from "@/hooks/useFolders";
|
|
import { NoteCreate } from "@/api/notes";
|
|
|
|
export const SidebarHeader = ({
|
|
setNewFolder,
|
|
}: {
|
|
setNewFolder: React.Dispatch<SetStateAction<boolean>>;
|
|
}) => {
|
|
const { selectedFolder } = useUIStore();
|
|
const createNote = useCreateNote();
|
|
const handleCreate = async () => {
|
|
createNote.mutate({
|
|
title: "Untitled",
|
|
content: "",
|
|
folder_id: selectedFolder,
|
|
} as NoteCreate);
|
|
};
|
|
return (
|
|
<div className="w-full p-2 border-b border-ctp-surface2 bg-ctp-mantle">
|
|
<div className="flex items-center justify-around bg-ctp-surface0 rounded-lg p-1 gap-1">
|
|
<button
|
|
onClick={() => setNewFolder(true)}
|
|
className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
|
|
title="New folder"
|
|
>
|
|
<FolderPlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
|
|
</button>
|
|
<button
|
|
onClick={handleCreate}
|
|
className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
|
|
title="New note"
|
|
>
|
|
<FileCirclePlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|