diff --git a/src/components/toolbox/notepad/button/button.module.css b/src/components/toolbox/notepad/button/button.module.css new file mode 100644 index 0000000..0b1e74a --- /dev/null +++ b/src/components/toolbox/notepad/button/button.module.css @@ -0,0 +1,39 @@ +.button { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + font-size: var(--font-sm); + color: var(--color-foreground); + cursor: pointer; + background-color: var(--color-neutral-100); + border: 1px solid var(--color-neutral-200); + border-radius: 4px; + outline: none; + transition: 0.2s; + transition-property: border-color, color, background-color; + + &.critical { + color: #f43f5e; + border-color: #f43f5e; + + &:hover { + background-color: rgb(244 63 94 / 10%); + } + } + + &.recommended { + font-size: var(--font-xsm); + color: #22c55e; + border-color: #22c55e; + + &:hover { + background-color: rgb(34 197 94 / 10%); + } + } + + &:hover { + background-color: var(--color-neutral-200); + } +} diff --git a/src/components/toolbox/notepad/button/button.tsx b/src/components/toolbox/notepad/button/button.tsx new file mode 100644 index 0000000..602120f --- /dev/null +++ b/src/components/toolbox/notepad/button/button.tsx @@ -0,0 +1,36 @@ +import { Tooltip } from '@/components/tooltip'; + +import { cn } from '@/helpers/styles'; + +import styles from './button.module.css'; + +interface ButtonProps { + critical?: boolean; + icon: React.ReactElement; + onClick: () => void; + recommended?: boolean; + tooltip: string; +} + +export function Button({ + critical, + icon, + onClick, + recommended, + tooltip, +}: ButtonProps) { + return ( + + + + ); +} diff --git a/src/components/toolbox/notepad/button/index.ts b/src/components/toolbox/notepad/button/index.ts new file mode 100644 index 0000000..a039b75 --- /dev/null +++ b/src/components/toolbox/notepad/button/index.ts @@ -0,0 +1 @@ +export { Button } from './button'; diff --git a/src/components/toolbox/notepad/notepad.module.css b/src/components/toolbox/notepad/notepad.module.css index bb811c0..bf90776 100644 --- a/src/components/toolbox/notepad/notepad.module.css +++ b/src/components/toolbox/notepad/notepad.module.css @@ -9,6 +9,12 @@ font-weight: 500; color: var(--color-foreground-subtle); } + + & .buttons { + display: flex; + column-gap: 4px; + align-items: center; + } } .textarea { @@ -27,7 +33,7 @@ .counter { margin-top: 8px; - font-size: var(--font-sm); + font-size: var(--font-xsm); color: var(--color-foreground-subtle); text-align: center; } diff --git a/src/components/toolbox/notepad/notepad.tsx b/src/components/toolbox/notepad/notepad.tsx index 2ad66e5..967b310 100644 --- a/src/components/toolbox/notepad/notepad.tsx +++ b/src/components/toolbox/notepad/notepad.tsx @@ -1,7 +1,16 @@ +import { BiTrash } from 'react-icons/bi/index'; +import { LuCopy, LuDownload } from 'react-icons/lu/index'; +import { FaCheck } from 'react-icons/fa6/index'; +import { FaUndo } from 'react-icons/fa/index'; + import { Modal } from '@/components/modal'; +import { Button } from './button'; + +import { useNoteStore } from '@/store'; +import { useCopy } from '@/hooks/use-copy'; +import { download } from '@/helpers/download'; import styles from './notepad.module.css'; -import { useNoteStore } from '@/store'; interface NotepadProps { onClose: () => void; @@ -10,19 +19,44 @@ interface NotepadProps { export function Notepad({ onClose, show }: NotepadProps) { const note = useNoteStore(state => state.note); + const history = useNoteStore(state => state.history); const write = useNoteStore(state => state.write); const words = useNoteStore(state => state.words()); const characters = useNoteStore(state => state.characters()); + const clear = useNoteStore(state => state.clear); + const restore = useNoteStore(state => state.restore); + + const { copy, copying } = useCopy(); return (

Your Note

+
+