Merge branch 'main' into login

AmbossTech · Aug 30, 2024 · 478e0f9 · 478e0f9
2 parents b67781e + c060ed9
commit 478e0f9
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 14 deletions.
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -30,6 +30,7 @@ import status1 from '/public/images/landing/status-1.svg';
 import status2 from '/public/images/landing/status-2.svg';
 import status3 from '/public/images/landing/status-3.svg';
 import { Logo } from '@/components/Logo';
+import { LanguageToggle } from '@/components/toggle/LanguageToggle';
 import { Button } from '@/components/ui/button-v2';
 import { ROUTES } from '@/utils/routes';
 import { CardSection } from '@/views/landing/CardSection';
@@ -54,7 +55,10 @@ export default function Page() {
         >
           <section className="relative grid items-center gap-8 rounded-3xl bg-white p-4 lg:grid-cols-2 lg:px-6 lg:py-4">
             <header className="z-10 flex w-full items-start justify-between lg:absolute lg:left-8 lg:top-10 lg:pr-[88px]">
-              <Logo className="w-32 fill-black lg:w-auto" />
+              <div className="flex flex-col gap-4 sm:flex-row">
+                <Logo className="w-32 fill-black lg:w-auto" />
+                <LanguageToggle />
+              </div>
 
               <div className="flex space-x-4">
                 <Button variant="primary" asChild className="lg:hidden">

diff --git a/src/components/header/ExternalHeader.tsx b/src/components/header/ExternalHeader.tsx
@@ -4,15 +4,23 @@ import Link from 'next/link';
 import { ROUTES } from '@/utils/routes';
 
 import { Logo } from '../Logo';
+import { LanguageToggle } from '../toggle/LanguageToggle';
 
 export const ExternalHeader = () => {
   return (
     <header className="flex w-full items-center justify-between space-x-2 border-b border-neutral-800 p-4 lg:px-12 lg:py-2">
       <Logo className="w-40 fill-foreground lg:w-44" />
 
-      <Link href={ROUTES.home} className="transition-opacity hover:opacity-75">
-        <X size={24} />
-      </Link>
+      <div className="flex items-center space-x-2">
+        <LanguageToggle />
+
+        <Link
+          href={ROUTES.home}
+          className="transition-opacity hover:opacity-75"
+        >
+          <X size={24} />
+        </Link>
+      </div>
     </header>
   );
 };
diff --git a/src/components/toggle/LanguageToggle.tsx b/src/components/toggle/LanguageToggle.tsx
@@ -1,18 +1,21 @@
 'use client';
 
-import { Check, Languages } from 'lucide-react';
+import { Globe } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import * as React from 'react';
 import { useState } from 'react';
+import { useIsClient } from 'usehooks-ts';
 
-import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { SupportedLanguage } from '@/i18n';
+import { cn } from '@/utils/cn';
+
+import { Button } from '../ui/button-v2';
 
 const getCookie = () =>
   document.cookie
@@ -27,17 +30,28 @@ const deleteCookie = () =>
   (document.cookie = 'locale=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;');
 
 export function LanguageToggle() {
+  const isClient = useIsClient();
+
   const { refresh } = useRouter();
 
   const [language, setLanguage] = useState<SupportedLanguage | undefined>(
     typeof window !== 'undefined' ? getCookie() : undefined
   );
 
+  if (!isClient) return null;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Languages className="h-[1.2rem] w-[1.2rem]" />
+        <Button
+          variant="neutral"
+          size="sm"
+          className="flex items-center space-x-1"
+        >
+          <Globe size={16} />
+          <p className="uppercase">
+            {language || document.documentElement.lang}
+          </p>
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
@@ -49,7 +63,7 @@ export function LanguageToggle() {
             refresh();
           }}
         >
-          English {language === 'en' && <Check size={14} className="ml-1" />}
+          <p className={cn(language === 'en' && 'font-bold')}>English 🇬🇧</p>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
@@ -58,16 +72,16 @@ export function LanguageToggle() {
             refresh();
           }}
         >
-          Español {language === 'es' && <Check size={14} className="ml-1" />}
+          <p className={cn(language === 'es' && 'font-bold')}>Español 🇪🇸</p>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
             deleteCookie();
             setLanguage(undefined);
-            refresh();
+            window.location.reload();
           }}
         >
-          System {!language && <Check size={14} className="ml-1" />}
+          <p className={cn(!language && 'font-bold')}>System</p>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

diff --git a/src/components/ui/button-v2.tsx b/src/components/ui/button-v2.tsx
@@ -11,8 +11,10 @@ const buttonVariants = cva(
       variant: {
         primary: 'text-black bg-primary hover:bg-primary-hover',
         secondary: 'text-black dark:bg-white bg-slate-300',
+        neutral: 'bg-neutral-800 text-white',
       },
       size: {
+        sm: 'p-2',
         md: 'px-4 py-2',
         lg: 'px-6 py-3',
       },

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -69,7 +69,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'z-50 space-y-4 overflow-hidden rounded-xl bg-neutral-800 p-4 text-white shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}