switch

web/client/src/components/ui/switch/LanguageSwitch.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Loader } from "lucide-react";
+import { FC } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+type LanguageSwitchProps = {
+  isEng: boolean;
+  isLoading: boolean;
+  label: string;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+export const LanguageSwitch: FC<LanguageSwitchProps> = ({
+  isEng,
+  isLoading,
+  label,
+  onCheckedChange,
+}: LanguageSwitchProps) => {
+  return (
+    <div className="flex items-center justify-end space-x-2">
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <Switch
+          id="airplane-mode"
+          checked={isEng}
+          onCheckedChange={onCheckedChange}
+        />
+      )}
+
+      <Label htmlFor="airplane-mode">{label}</Label>
+    </div>
+  );
+};

web/client/src/components/ui/switch/index.tsx

@@ -0,0 +1,2 @@
+export * from "./switch";
+export * from "./LanguageSwitch";

web/client/src/features/articles/components/ArticleListTemplate.tsx

@@ -10,8 +10,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ArticleTabType } from "@/types/article";
 import { LanguageStatus } from "@/types/language";
 
-import { ArticleLanguageSwitch } from "./ArticleLanguageSwitch";
 import { ArticleList } from "./ArticleList";
+import { ArticleLanguageSwitch } from "./Switch";
 import { fetchArticlesAPI } from "../actions/article";
 
 type ArticleListTemplateProps = {

web/client/src/features/articles/components/ArticleLanguageSwitch.tsx → web/client/src/features/articles/components/Switch/ArticleLanguageSwitch.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Loader } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { FC, useCallback, useState } from "react";
 
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
+import { LanguageSwitch } from "@/components/ui/switch";
 
 import { ArticleTabType } from "@/types/article";
 import { LanguageStatus } from "@/types/language";
@@ -42,14 +40,11 @@ export const ArticleLanguageSwitch: FC<ArticleLanguageSwitchProps> = ({
   );
 
   return (
-    <div className="flex items-center justify-end space-x-2">
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <Switch id="airplane-mode" checked={isEng} onCheckedChange={onChange} />
-      )}
-
-      <Label htmlFor="airplane-mode">{switchLabel}</Label>
-    </div>
+    <LanguageSwitch
+      isEng={isEng}
+      isLoading={isLoading}
+      label={switchLabel}
+      onCheckedChange={onChange}
+    />
   );
 };

web/client/src/features/articles/components/Switch/index.tsx

@@ -0,0 +1 @@
+export * from "./ArticleLanguageSwitch";

web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Loader } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { FC, useCallback, useState } from "react";
 
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
+import { LanguageSwitch } from "@/components/ui/switch";
 
 import { LanguageStatus } from "@/types/language";
 
@@ -39,14 +37,11 @@ export const BookmarkLanguageSwitch: FC<BookmarkLanguageSwitchProps> = ({
   );
 
   return (
-    <div className="flex items-center justify-end space-x-2">
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <Switch id="airplane-mode" checked={isEng} onCheckedChange={onChange} />
-      )}
-
-      <Label htmlFor="airplane-mode">{switchLabel}</Label>
-    </div>
+    <LanguageSwitch
+      isEng={isEng}
+      isLoading={isLoading}
+      label={switchLabel}
+      onCheckedChange={onChange}
+    />
   );
 };