[_]: feat/add appearance section in General tab (Preferences)

src/components/preferences/components/Section.tsx → src/components/preferences/components/PreferencesSection.tsx

@@ -9,7 +9,7 @@ interface SectionProps {
   onClose: () => void;
 }
 
-const Section = ({ className = '', children, title, onBackButtonClicked, onClose }: SectionProps) => {
+const PreferencesSection = ({ className = '', children, title, onBackButtonClicked, onClose }: SectionProps) => {
   return (
     <div className={`relative w-full rounded-tr-2xl ${className}`}>
       <div className="absolute z-50 flex w-full items-center justify-between rounded-tr-2xl p-2.5 pl-6 before:absolute before:inset-0 before:-z-1 before:bg-surface/85 before:backdrop-blur-3xl before:transition-colors">
@@ -25,7 +25,7 @@ const Section = ({ className = '', children, title, onBackButtonClicked, onClose
         </div>
         <button
           className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-highlight/4 active:bg-highlight/8"
-          onClick={() => onClose()}
+          onClick={onClose}
         >
           <XIcon size={22} />
         </button>
@@ -35,4 +35,4 @@ const Section = ({ className = '', children, title, onBackButtonClicked, onClose
   );
 };
 
-export default Section;
+export default PreferencesSection;

src/components/preferences/sections/general/components/PreferenceSectionLayout.tsx

@@ -0,0 +1,29 @@
+import { CaretLeftIcon } from '@phosphor-icons/react';
+import { type ReactNode } from 'react';
+
+interface SectionProps {
+  className?: string;
+  children: ReactNode;
+  title: string;
+  onBackButtonClicked?: () => void;
+}
+
+const PreferenceSectionLayout = ({ className = '', children, title, onBackButtonClicked }: Readonly<SectionProps>) => {
+  return (
+    <div className={`${className} space-y-2`}>
+      <div className="flex flex-row space-x-4 ">
+        {onBackButtonClicked && (
+          <button onClick={onBackButtonClicked}>
+            <div className="text-gray-100">
+              <CaretLeftIcon size={22} />
+            </div>
+          </button>
+        )}
+        <span className="text-lg font-medium text-gray-100">{title}</span>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default PreferenceSectionLayout;

src/components/preferences/sections/general/components/appearance/index.tsx

@@ -0,0 +1,39 @@
+import { useThemeContext } from '@/context/theme/useThemeContext';
+import { useTranslationContext } from '@/i18n';
+import appearance_dark from '@/assets/appearance/dark.svg';
+import appearance_light from '@/assets/appearance/light.svg';
+import appearance_system from '@/assets/appearance/system.svg';
+import PreferenceSectionLayout from '../PreferenceSectionLayout';
+import ThemeButton from './theme-button';
+import type { Theme } from '@/context/theme/types';
+
+const themes = [
+  { theme: 'system', img: appearance_system },
+  { theme: 'light', img: appearance_light },
+  { theme: 'dark', img: appearance_dark },
+];
+
+const Appearance = () => {
+  const { translate } = useTranslationContext();
+  const { currentTheme, toggleTheme } = useThemeContext();
+
+  return (
+    <PreferenceSectionLayout title={translate('modals.preferences.sections.general.appearance.title')}>
+      <div className="flex flex-col w-full h-max overflow-x-auto">
+        <div className="flex flex-row w-max h-max pb-2">
+          {themes.map((themeInfo) => (
+            <ThemeButton
+              key={themeInfo.theme}
+              theme={themeInfo.theme as Theme}
+              toggleTheme={toggleTheme}
+              isSelected={currentTheme === themeInfo.theme}
+              img={themeInfo.img}
+            />
+          ))}
+        </div>
+      </div>
+    </PreferenceSectionLayout>
+  );
+};
+
+export default Appearance;

src/components/preferences/sections/general/components/appearance/theme-button/index.tsx

@@ -0,0 +1,38 @@
+import type { Theme } from '@/context/theme/types';
+import { useTranslationContext } from '@/i18n';
+
+interface ThemeButtonProps {
+  theme: Theme;
+  toggleTheme: (theme: Theme) => void;
+  isSelected: boolean;
+  img: string;
+}
+
+const ThemeButton = ({ theme, toggleTheme, isSelected, img }: ThemeButtonProps) => {
+  const { translate } = useTranslationContext();
+
+  return (
+    <button
+      className={'mr-4 flex w-36 flex-col space-y-1 rounded-xl'}
+      onClick={() => {
+        toggleTheme(theme);
+      }}
+    >
+      <div
+        className={`box-border overflow-hidden rounded-xl ${
+          isSelected
+            ? 'border-2 border-primary  outline-4 outline-primary/10 drop-shadow'
+            : 'border-2 border-transparent'
+        }`}
+      >
+        <img src={img} alt={theme} draggable={false} />
+      </div>
+
+      <span className={`text-sm font-medium ${isSelected ? '' : 'text-gray-50'}`}>
+        {translate(`modals.preferences.sections.general.appearance.${theme}`)}
+      </span>
+    </button>
+  );
+};
+
+export default ThemeButton;

src/components/preferences/sections/general/index.tsx

@@ -1,13 +1,18 @@
 import { useTranslationContext } from '@/i18n';
-import Section from '../../components/Section';
+import PreferencesSection from '../../components/PreferencesSection';
+import Appearance from './components/appearance';
 
 const GeneralSection = ({ onClose }: { onClose: () => void }) => {
   const { translate } = useTranslationContext();
   return (
-    <Section className="max-w-2xl" title={translate('modals.preferences.sections.general.title')} onClose={onClose}>
-      {/* TODO: Add appearance, language and support components */}
-      <p>{translate('modals.preferences.sections.general.title')}</p>
-    </Section>
+    <PreferencesSection
+      className="max-w-2xl"
+      title={translate('modals.preferences.sections.general.title')}
+      onClose={onClose}
+    >
+      {/* TODO: Add language and support components */}
+      <Appearance />
+    </PreferencesSection>
   );
 };