chore

src/components/atoms/icon/BottomAddSectionIcon/index.tsx

@@ -1,6 +1,5 @@
 import { PlusCircle } from "lucide-react";
 import { Spacer } from "../../Spacer";
-import { TabItem } from "../../../../styles/tabItem";
 import { useAddSection } from "@/hooks/useAddSection";
 import { Button } from "@/components/ui/button";
 
@@ -11,14 +10,11 @@ export const BottomAddSection = () => {
 			<div>
 				<Spacer horizontal size={30} />
 			</div>
-			<div className="w-full">
-				<TabItem>
-					<PlusCircle className="text-xl" />
+			<Button onClick={handleAddSection}>
+				<PlusCircle className="text-xl" />
 
-					<div>Add Section</div>
-					<Button onClick={handleAddSection} />
-				</TabItem>
-			</div>
+				<div>Add Section</div>
+			</Button>
 		</div>
 	);
 };

src/components/atoms/icon/FileExportIcon/index.tsx

@@ -1,21 +1,19 @@
 import type { DispatchWithoutAction } from "react";
 import { Download } from "lucide-react";
 import { Spacer } from "../../Spacer";
-import { TabItem } from "../../../../styles/tabItem";
 import { Button } from "@/components/ui/button";
 type Props = {
 	handleMarkdownDownload: DispatchWithoutAction;
 };
 export const FileExport = ({ handleMarkdownDownload }: Props) => (
-	<TabItem>
+	<Button onClick={handleMarkdownDownload}>
 		{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
 		<label className="cursor-pointer flex h-full items-center">
 			<i>
 				<Download className="cursor-pointer text-xl" />
 			</i>
 			<Spacer horizontal size={4} />
 			<div>Export</div>
-			<Button onClick={handleMarkdownDownload} type="button" />
 		</label>
-	</TabItem>
+	</Button>
 );

src/components/atoms/icon/FileImportIcon/index.tsx

@@ -1,12 +1,12 @@
 import type { Dispatch, ChangeEvent } from "react";
 import { FileInput } from "lucide-react";
 import { Spacer } from "../../Spacer";
-import { TabItem } from "../../../../styles/tabItem";
+import { Button } from "@/components/ui/button";
 type Props = {
 	handleClick: Dispatch<ChangeEvent<HTMLInputElement>>;
 };
 export const FileImport = ({ handleClick }: Props) => (
-	<TabItem>
+	<Button>
 		<label className="cursor-pointer flex h-full items-center">
 			<i>
 				<FileInput className="text-xl" />
@@ -20,5 +20,5 @@ export const FileImport = ({ handleClick }: Props) => (
 				className="hidden"
 			/>
 		</label>
-	</TabItem>
+	</Button>
 );

src/components/atoms/icon/TemplateIcon/index.tsx

@@ -1,6 +1,5 @@
 import { FileText } from "lucide-react";
 import { Spacer } from "../../Spacer";
-import { TabItem } from "../../../../styles/tabItem";
 import type { LanguageKey, SeparateLevelType } from "@/types";
 // import { SetTemplateModal } from "@/components/features/setTemplateModal";
 import { languageAndReadmeMap } from "@/constants/languageAndReadmeMap";