fix: simplify toggles

src/components/Card/index.tsx

@@ -1,15 +1,8 @@
 import { FC } from "react";
-import { PlayCircle, Heart, HeartFill } from "@geist-ui/react-icons";
+import { PlayCircle } from "@geist-ui/react-icons";
+import { HeartToggle } from "@/components/Toggles";
 import { Container, Cover, Button, Title, Subtitle, Body } from "./style";
 
-export const HeartToggle: FC<{ active: boolean }> = ({ active }) => {
-  if (active) {
-    return <HeartFill color="var(--highlight-magenta)" />;
-  }
-
-  return <Heart color="var(--accents-3)" />;
-};
-
 const DEFAULT_SUBTITLE = "Global";
 
 export type Card = {
@@ -42,16 +35,9 @@ export const Card: FC<Card> = ({
         <Title>{title}</Title>
         <Subtitle>{subtitle || DEFAULT_SUBTITLE}</Subtitle>
       </div>
-      {!isFaved && (
-        <Button onClick={onFaved}>
-          <HeartToggle active={false} />
-        </Button>
-      )}
-      {isFaved && (
-        <Button onClick={onUnFaved}>
-          <HeartToggle active={true} />
-        </Button>
-      )}
+      <Button onClick={!isFaved ? onFaved : onUnFaved}>
+        <HeartToggle active={isFaved} />
+      </Button>
     </Body>
   </Container>
 );

src/components/Toggles/index.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactElement } from "react";
+import {
+  Heart,
+  HeartFill,
+  ToggleLeft,
+  ToggleRight,
+} from "@geist-ui/react-icons";
+
+export { ToggleItem } from "./style";
+
+export type Toggable = {
+  on: ReactElement;
+  off: ReactElement;
+};
+
+export type Activable = {
+  active: boolean;
+};
+
+export type Toggle = Toggable & Activable;
+
+export const Toggle: FC<Toggle> = ({ on, off, active }) => (
+  <>
+    {active && on}
+    {!active && off}
+  </>
+);
+
+export const HeartToggle: FC<Activable> = (props) => (
+  <Toggle
+    on={<HeartFill color="var(--highlight-magenta)" />}
+    off={<Heart color="var(--accents-5)" />}
+    {...props}
+  />
+);
+
+export const RightLeftToggle: FC<Activable> = (props) => (
+  <Toggle
+    on={<ToggleRight color="var(--cyan)" />}
+    off={<ToggleLeft color="var(--accents-5)" />}
+    {...props}
+  />
+);

src/pages/settings.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { Box } from "@/components/Box";
 import { Stack } from "@/components/Stack";
-import { Toggle, ToggleItem } from "@/components/Toggle";
+import { RightLeftToggle, ToggleItem } from "@/components/Toggles";
 import { Heading } from "@/components/Typography";
 import { useTranslation } from "@/lib/hooks/useTranslation";
 import { localesMap } from "@/lib/utils";
@@ -25,7 +25,7 @@ export const Index = () => {
             <Link href="/settings" locale={lang}>
               <a>
                 <ToggleItem>
-                  {localesMap[lang]} <Toggle active={locale == lang} />
+                  {localesMap[lang]} <RightLeftToggle active={locale == lang} />
                 </ToggleItem>
               </a>
             </Link>