New feature: category selection in newBookmarkForm

components/ChevronDownIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+export const ChevronDownIcon = ({ strokeWidth = 1.5, ...otherProps }) => (
+	<svg
+		aria-hidden='true'
+		fill='none'
+		focusable='false'
+		height='1em'
+		role='presentation'
+		viewBox='0 0 24 24'
+		width='1em'
+		{...otherProps}>
+		<path
+			d='m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeMiterlimit={10}
+			strokeWidth={strokeWidth}
+		/>
+	</svg>
+)

components/newBookmarkForm.tsx

@@ -8,9 +8,16 @@ import {
 	ModalFooter,
 	useDisclosure,
 } from '@nextui-org/modal'
+import {
+	Dropdown,
+	DropdownTrigger,
+	DropdownMenu,
+	DropdownItem,
+} from '@nextui-org/dropdown'
 import { Button } from '@nextui-org/button'
 import { Input } from '@nextui-org/input'
 import { Icon } from '@iconify/react'
+import { ChevronDownIcon } from './ChevronDownIcon'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
@@ -24,7 +31,7 @@ export default function NewBookmarkForm() {
 			link,
 			description,
 			url,
-			category_id: 2,
+			category_id: selectedKey === 'Other' ? 2 : 1,
 		}
 		await fetch('/api/bookmark', {
 			method: 'POST',
@@ -39,6 +46,8 @@ export default function NewBookmarkForm() {
 	const [description, setDescription] = useState('')
 	const [url, setUrl] = useState('')
 
+	const [selectedKey, setSelectedKey] = useState('Other')
+
 	return (
 		<>
 			<Button
@@ -100,6 +109,40 @@ export default function NewBookmarkForm() {
 										setDescription(event.target.value)
 									}}
 								/>
+								<Dropdown>
+									<DropdownTrigger className='hidden justify-start sm:flex'>
+										<Button
+											endContent={
+												<ChevronDownIcon className='text-small' />
+											}
+											variant='flat'>
+											<div className='w-full text-start'>
+												{selectedKey}
+											</div>
+										</Button>
+									</DropdownTrigger>
+									<DropdownMenu
+										disallowEmptySelection
+										selectionMode='single'
+										selectedKeys={selectedKey}>
+										<DropdownItem
+											key='Coding'
+											onClick={() => {
+												setSelectedKey('Coding')
+											}}
+											className='capitalize'>
+											Coding
+										</DropdownItem>
+										<DropdownItem
+											key='Other'
+											onClick={() => {
+												setSelectedKey('Other')
+											}}
+											className='capitalize'>
+											Other
+										</DropdownItem>
+									</DropdownMenu>
+								</Dropdown>
 								<Input
 									label='Url'
 									placeholder='Enter Url'