From ada8f116d0f93ec44354c428ef8af0d427f1b07a Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Fri, 15 Nov 2024 15:18:18 +0100
Subject: [PATCH] Adjust tab styles

---
 src/components/about/project-1/index.tsx | 10 +++++-----
 src/components/ui/tabs.tsx               | 25 +++++++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/about/project-1/index.tsx b/src/components/about/project-1/index.tsx
index 750a895..c74f30d 100644
--- a/src/components/about/project-1/index.tsx
+++ b/src/components/about/project-1/index.tsx
@@ -250,7 +250,7 @@ export default function Section1() {
             )}
           </AnimatePresence>
         </div>
-        <div className="flex h-fit min-w-[376px] max-w-[376px] flex-1 items-end gap-4">
+        <div className="flex h-fit xl:min-w-[376px] max-w-[376px] flex-1 items-end gap-4">
           <Image
             width={201}
             height={44}
@@ -597,10 +597,10 @@ export default function Section1() {
             Sectorial applications in GLORIA
           </h3>
           <Tabs defaultValue="agriculture">
-            <TabsList>
-              <TabsTrigger value="agriculture">Agriculture</TabsTrigger>
-              <TabsTrigger value="energy">Energy</TabsTrigger>
-              <TabsTrigger value="insurance">Insurance</TabsTrigger>
+            <TabsList className="h-fit flex-col xl:flex-row">
+              <TabsTrigger value="agriculture" variant="about">Agriculture</TabsTrigger>
+              <TabsTrigger value="energy" variant="about">Energy</TabsTrigger>
+              <TabsTrigger value="insurance" variant="about">Insurance</TabsTrigger>
             </TabsList>
             {agricultureContent}
             {energyContent}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 7f9553f..7f63fe2 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const Tabs = TabsPrimitive.Root;
@@ -22,10 +22,26 @@ const TabsList = React.forwardRef<
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "whitespace-nowrap py-1.5 pr-10 font-medium uppercase decoration-4 underline-offset-4 data-[state=active]:text-light-green data-[state=active]:underline xl:text-lg",
+        "about": "max-xl:w-[213px] mb-2 uppercase px-10 py-4 data-[state=active]:bg-green-900 justify-center items-center flex text-center text-green-900 data-[state=active]:text-white xl:text-lg xl:mr-6 font-medium border-2 border-green-900",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, onClick, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & VariantProps<typeof tabsTriggerVariants>
+>(({ className, onClick, variant, ...props }, ref) => {
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
   };
@@ -34,8 +50,7 @@ const TabsTrigger = React.forwardRef<
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap py-1.5 pr-10 font-medium uppercase decoration-4 underline-offset-4 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-light-green data-[state=active]:underline xl:text-lg",
-        className,
+        tabsTriggerVariants({ variant, className })
       )}
       onClick={handleClick}
       {...props}