Removed link and description inputs from form

components/bookmarkCard.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card'
+import { Card, CardHeader } from '@nextui-org/card'
 import { Link } from '@nextui-org/link'
-import { Divider } from '@nextui-org/divider'
 import { Image } from '@nextui-org/image'
 import { Icon } from '@iconify/react'
 import { Button } from '@nextui-org/button'
@@ -53,7 +52,7 @@ export const BookmarkCard = ({ data }: { data: Bookmark }) => {
 						className='flex grow flex-col items-start'>
 						<p className='text-md'>{data.name}</p>
 						<p className='text-small text-default-500'>
-							{data.link}
+							{data.url}
 						</p>
 					</Link>
 					<Dropdown>

components/editBookmarkForm.tsx

@@ -66,46 +66,14 @@ export default function EditBookmarkForm() {
 								/>
 							</ModalHeader>
 							<ModalBody className='gap-4'>
-								<Input
-									autoFocus
-									label='Name'
-									placeholder='Enter Name'
-									variant='bordered'
-									value={bookmark.name}
-									onChange={(event) => {
-										setBookmark({
-											...bookmark,
-											name: event.target.value,
-										})
-									}}
-								/>
-								<Input
-									label='Link'
-									placeholder='Enter Link'
-									variant='bordered'
-									value={bookmark.link}
-									onChange={(event) => {
-										setBookmark({
-											...bookmark,
-											link: event.target.value,
-										})
-									}}
-								/>
-								<Input
-									label='Description'
-									placeholder='Enter Desription'
-									variant='bordered'
-									value={bookmark.description}
-									onChange={(event) => {
-										setBookmark({
-											...bookmark,
-											description: event.target.value,
-										})
-									}}
-								/>
 								<Dropdown>
 									<DropdownTrigger className='hidden justify-start sm:flex'>
 										<Button
+											startContent={
+												<span className='text-default-400'>
+													Category:
+												</span>
+											}
 											endContent={
 												<ChevronDownIcon className='text-small' />
 											}
@@ -118,7 +86,13 @@ export default function EditBookmarkForm() {
 									<DropdownMenu
 										disallowEmptySelection
 										selectionMode='single'
-										selectedKeys={selectedKey}>
+										selectedKeys={selectedKey}
+										disabledKeys={['disabled']}>
+										<DropdownItem
+											key='disabled'
+											className='capitalize'>
+											Select Category
+										</DropdownItem>
 										<DropdownItem
 											key='Coding'
 											onClick={() => {
@@ -137,6 +111,19 @@ export default function EditBookmarkForm() {
 										</DropdownItem>
 									</DropdownMenu>
 								</Dropdown>
+								<Input
+									autoFocus
+									label='Name'
+									placeholder='Enter Name'
+									variant='bordered'
+									value={bookmark.name}
+									onChange={(event) => {
+										setBookmark({
+											...bookmark,
+											name: event.target.value,
+										})
+									}}
+								/>
 								<Input
 									label='Url'
 									placeholder='Enter Url'

components/newBookmarkForm.tsx

@@ -65,7 +65,7 @@ export default function NewBookmarkForm() {
 			<Modal
 				isOpen={isOpen}
 				onOpenChange={onOpenChange}
-				placement='top-center'
+				placement='center'
 				hideCloseButton>
 				<ModalContent
 					onKeyUp={(e) => {
@@ -81,37 +81,14 @@ export default function NewBookmarkForm() {
 								/>
 							</ModalHeader>
 							<ModalBody className='gap-4'>
-								<Input
-									autoFocus
-									label='Name'
-									placeholder='Enter Name'
-									variant='bordered'
-									value={name}
-									onChange={(event) => {
-										setName(event.target.value)
-									}}
-								/>
-								<Input
-									label='Link'
-									placeholder='Enter Link'
-									variant='bordered'
-									value={link}
-									onChange={(event) => {
-										setLink(event.target.value)
-									}}
-								/>
-								<Input
-									label='Description'
-									placeholder='Enter Desription'
-									variant='bordered'
-									value={description}
-									onChange={(event) => {
-										setDescription(event.target.value)
-									}}
-								/>
 								<Dropdown>
-									<DropdownTrigger className='hidden justify-start sm:flex'>
+									<DropdownTrigger className='flex justify-start'>
 										<Button
+											startContent={
+												<span className='text-default-400'>
+													Category:
+												</span>
+											}
 											endContent={
 												<ChevronDownIcon className='text-small' />
 											}
@@ -124,7 +101,13 @@ export default function NewBookmarkForm() {
 									<DropdownMenu
 										disallowEmptySelection
 										selectionMode='single'
-										selectedKeys={selectedKey}>
+										selectedKeys={selectedKey}
+										disabledKeys={['disabled']}>
+										<DropdownItem
+											key='disabled'
+											className='capitalize'>
+											Select Category
+										</DropdownItem>
 										<DropdownItem
 											key='Coding'
 											onClick={() => {
@@ -143,6 +126,16 @@ export default function NewBookmarkForm() {
 										</DropdownItem>
 									</DropdownMenu>
 								</Dropdown>
+								<Input
+									autoFocus
+									label='Name'
+									placeholder='Enter Name'
+									variant='bordered'
+									value={name}
+									onChange={(event) => {
+										setName(event.target.value)
+									}}
+								/>
 								<Input
 									label='Url'
 									placeholder='Enter Url'

types/index.ts

@@ -7,8 +7,8 @@ export type IconSvgProps = SVGProps<SVGSVGElement> & {
 
 const bookmark = {
 	name: z.string().nonempty(),
-	link: z.string().nonempty(),
-	description: z.string().nonempty(),
+	link: z.string(),
+	description: z.string(),
 	url: z.string().url().nonempty(),
 	category_id: z.number(),
 }