chore

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

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

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

@@ -7,21 +7,16 @@ import { Button } from "@/components/ui/button";
 export const BottomAddSection = () => {
 	const { handleAddSection } = useAddSection();
 	return (
-		<div className="fixed bottom-0 left-0 w-full flex items-center justify-start bg-gray-100 rounded-md p-4">
+		<div>
 			<div>
 				<Spacer horizontal size={30} />
 			</div>
 			<div className="w-full">
 				<TabItem>
-					{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
-					<label className="cursor-pointer flex h-full items-center justify-center w-full box-border">
-						<i>
-							<PlusCircle className="text-xl" />
-						</i>
-						<Spacer horizontal size={4} />
-						<div>Add Section</div>
-						<Button onClick={handleAddSection} type="button" />
-					</label>
+					<PlusCircle className="text-xl" />
+
+					<div>Add Section</div>
+					<Button onClick={handleAddSection} />
 				</TabItem>
 			</div>
 		</div>

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

@@ -1,22 +1,18 @@
 import { Eraser } from "lucide-react";
 import { Spacer } from "../../Spacer";
-import { TabItem } from "../../../../styles/tabItem";
 import { useMarkdownContext } from "@/context/MarkdownContext";
+import { Button } from "@/components/ui/button";
 
 export const ClearIcon = () => {
 	const { setMarkdown } = useMarkdownContext();
 
 	return (
-		<TabItem>
-			{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
-			<label className="cursor-pointer flex h-full items-center">
-				<i>
-					<Eraser className="text-xl" />
-				</i>
-				<Spacer horizontal size={4} />
-				<div>Clear</div>
-				<button onClick={() => setMarkdown([])} type="button" />
-			</label>
-		</TabItem>
+		<Button onClick={() => setMarkdown([])}>
+			<i>
+				<Eraser className="text-xl" />
+			</i>
+			<Spacer horizontal size={4} />
+			<div>Clear</div>
+		</Button>
 	);
 };

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

@@ -6,7 +6,7 @@ import type { LanguageKey, SeparateLevelType } from "@/types";
 import { languageAndReadmeMap } from "@/constants/languageAndReadmeMap";
 import { useSplitByTag } from "@/hooks/useSplitByTag";
 import { useMarkdownContext } from "@/context/MarkdownContext";
-// import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 
 export const TemplateSection = () => {
 	const { splitByTag } = useSplitByTag();
@@ -42,17 +42,14 @@ export const TemplateSection = () => {
 				<SetTemplateModal handleClose={close} handleApply={handleSetTemplate} />
 			</Modal> */}
 
-			<TabItem>
-				{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
-				<label className="cursor-pointer flex h-full items-center">
-					<i>
-						<FileText className="text-xl" />
-					</i>
-					<Spacer horizontal size={4} />
-					<div>Use Template</div>
-					{/* <Button onClick={open} type="button" /> */}
-				</label>
-			</TabItem>
+			{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+			<Button>
+				<i>
+					<FileText className="text-xl" />
+				</i>
+				<Spacer horizontal size={4} />
+				<div>Use Template</div>
+			</Button>
 		</>
 	);
 };

src/index.css

@@ -45,7 +45,7 @@ body {
 	--chart-3: oklch(0.398 0.07 227.392);
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.625rem;;
+	--radius: 0.625rem;
 	--sidebar: oklch(0.985 0 0);
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
@@ -131,10 +131,10 @@ body {
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+	* {
+		@apply border-border outline-ring/50;
 	}
-  body {
-    @apply bg-background text-foreground;
+	body {
+		@apply bg-background text-foreground;
 	}
 }