fix: lint

Author: duylongpro99

src/app/(home)/Navbar.tsx

@@ -3,8 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { SearchInput } from "./SearchInput";
 
-type Props = {};
-export const Navbar: React.FC<Props> = ({}) => {
+export const Navbar: React.FC = () => {
   return (
     <nav className="flex items-center justify-between h-full w-full">
       <div className="flex gap-3 items-center shrink-0 pr-6">

src/app/(home)/SearchInput.tsx

@@ -4,10 +4,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useSearchParam } from "@/hooks/use-search-param";
 import { SearchIcon, XIcon } from "lucide-react";
-import { use, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
-type Props = {};
-export const SearchInput: React.FC<Props> = ({}) => {
+export const SearchInput: React.FC = () => {
   const [search, setSearch] = useSearchParam();
   const [value, setValue] = useState<string>(search);
 

src/app/(home)/TemplatesGallery.tsx

@@ -10,9 +10,7 @@ import {
 import { DOCUMENT_TEMPLATES } from "@/constants/templates";
 import { cn } from "@/lib/utils";
 
-type Props = {};
-
-export const TemplatesGallery: React.FC<Props> = ({}) => {
+export const TemplatesGallery: React.FC = () => {
   const isCreating = false;
 
   return (

src/app/(home)/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useQuery } from "convex/react";
+import { api } from "../../../convex/_generated/api";
 import { Navbar } from "./Navbar";
 import { TemplatesGallery } from "./TemplatesGallery";
-import { api } from "../../../convex/_generated/api";
 
 const Page: React.FC = () => {
   const documents = useQuery(api.document.list);
@@ -24,7 +24,7 @@ const Page: React.FC = () => {
         <TemplatesGallery />
 
         {documents?.map((document) => {
-          return <span>{document.title}</span>;
+          return <span key={document._id}>{document.title}</span>;
         })}
       </div>
     </div>

src/app/document/[documentId]/(navbar)/DocumentInput.tsx

@@ -1,7 +1,6 @@
 import { CloudFogIcon } from "lucide-react";
 
-type Props = {};
-export const DocumentInput: React.FC<Props> = ({}) => {
+export const DocumentInput: React.FC = () => {
   return (
     <div className="flex items-center gap-2">
       <span className="text-lg px-1.5 cursor-pointer truncate">

src/app/document/[documentId]/(navbar)/MenuBar.tsx

@@ -32,8 +32,7 @@ import {
   Undo2Icon,
 } from "lucide-react";
 
-type Props = {};
-export const MenuBar: React.FC<Props> = ({}) => {
+export const MenuBar: React.FC = () => {
   const { editor } = useEditorStore();
 
   const addTable = ({ rows, cols }: { rows: number; cols: number }) => {
@@ -177,6 +176,7 @@ export const MenuBar: React.FC<Props> = ({}) => {
               <MenubarSubContent>
                 {Array.from({ length: 4 }, (_, i) => i).map((i) => (
                   <MenubarItem
+                    key={i}
                     onClick={() =>
                       addTable({
                         cols: i + 1,

src/app/document/[documentId]/(navbar)/navbar.tsx

@@ -3,8 +3,7 @@ import Link from "next/link";
 import { DocumentInput } from "./DocumentInput";
 import { MenuBar } from "./MenuBar";
 
-type Props = {};
-export const Navbar: React.FC<Props> = ({}) => {
+export const Navbar: React.FC = () => {
   return (
     <>
       <nav className="flex items-center justify-between bg-white">

src/app/document/[documentId]/(ruler)/Ruler.tsx

@@ -1,15 +1,13 @@
 import React, { useRef, useState } from "react";
 import { Marker } from "./Marker";
 
-type Props = {};
-
 const makers = Array.from({ length: 83 }, (_, i) => i);
 
 const PAGE_WIDTH = 816;
 const MINIMUM_SPACE = 100;
 const INITIAL_MG = 56;
 
-export const Ruler: React.FC<Props> = ({}) => {
+export const Ruler: React.FC = () => {
   const [leftMg, setLeftMg] = useState(INITIAL_MG);
   const [rightMg, setRightMg] = useState(INITIAL_MG);
 

src/app/document/[documentId]/(toolbar)/AlignButton.tsx

@@ -1,5 +1,3 @@
-import { type ColorResult } from "react-color";
-
 import {
   DropdownMenu,
   DropdownMenuContent,

src/app/document/[documentId]/(toolbar)/ImageButton.tsx

@@ -1,16 +1,7 @@
 import { useEditorStore } from "@/store/useEditorStore";
 import { useState } from "react";
 
-import { CirclePicker } from "react-color";
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ImageIcon, Link2Icon, SearchIcon, UploadIcon } from "lucide-react";
-import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -19,6 +10,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ImageIcon, SearchIcon, UploadIcon } from "lucide-react";
 
 export const ImageButton: React.FC = () => {
   const { editor } = useEditorStore();