From 97540e1a43a2e80e6ac0962bb77b05e55116c68b Mon Sep 17 00:00:00 2001
From: diffim <vhiunese@gmail.com>
Date: Sat, 16 Sep 2023 21:50:20 +0400
Subject: [PATCH] remopved nested css

---
 src/components/Showcase.tsx                |  2 +-
 src/components/showcase/CodeTabs.tsx       | 28 +++++++++++-----------
 src/components/timeline/CarouselSlider.tsx | 12 +++++++---
 src/styles/globals.css                     | 15 ++++++------
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx
index dfb79e7..13d7aae 100644
--- a/src/components/Showcase.tsx
+++ b/src/components/Showcase.tsx
@@ -196,7 +196,7 @@ function Showcase() {
             }
             className="  showcase-5 col-span-full w-full lg:col-span-6  "
           >
-            <div className="showcase-3-width relative gap-3 -mx-10    flex flex-col h-[360px] w-full items-center justify-center bg-transparent ">
+            <div className="showcase-3-width relative gap-3 -mx-10    flex flex-col h-[360px] w-full items-center justify-center z-10">
               <div className="bottom-0 absolute right-0">
                 <div className="">
                   <span className="text-[32px] font-medium leading-7 text-white">
diff --git a/src/components/showcase/CodeTabs.tsx b/src/components/showcase/CodeTabs.tsx
index 7c37236..3e9c5d8 100644
--- a/src/components/showcase/CodeTabs.tsx
+++ b/src/components/showcase/CodeTabs.tsx
@@ -14,21 +14,21 @@ const CodeTabs: React.FC<CodeTabsProps> = () => {
     switch (activeTab) {
       case "python":
         return `
-          def trust_authx():
-              # Python code
-              pass
+def trust_authx():
+    # Python code
+    pass
         `;
       case "javascript":
         return `
-          function trustAuth() {
-              // JavaScript code
-          }
+function trustAuth() {
+  //js code
+}
         `;
       case "go":
         return `
-          func TrustAuthX() {
-              // Go code
-          }
+func TrustAuthX() {
+    // Go code
+}
         `;
       default:
         return "";
@@ -36,15 +36,15 @@ const CodeTabs: React.FC<CodeTabsProps> = () => {
   };
 
   return (
-    <div className="">
-      <div className="flex space-x-2">
+    <div className=" bg-black z-50 ">
+      <div className="flex space-x-2 pt-2 px-2">
         <button
           className={`px-4 py-2 rounded ${
             activeTab === "python" ? "bg-gray-300" : "bg-gray-200"
           }`}
           onClick={() => handleTabClick("python")}
         >
-          Trustauthx.py
+          TrustAuthx.py
         </button>
         <button
           className={`px-4 py-2 rounded ${
@@ -60,11 +60,11 @@ const CodeTabs: React.FC<CodeTabsProps> = () => {
           }`}
           onClick={() => handleTabClick("go")}
         >
-          Trustauthx.go
+          TrustAuthx.go
         </button>
       </div>
 
-      <div className="mt-4">
+      <div className="p-4">
         <SyntaxHighlighter language="javascript" showLineNumbers>
           {getCode()}
         </SyntaxHighlighter>
diff --git a/src/components/timeline/CarouselSlider.tsx b/src/components/timeline/CarouselSlider.tsx
index 7412b8e..1827a13 100644
--- a/src/components/timeline/CarouselSlider.tsx
+++ b/src/components/timeline/CarouselSlider.tsx
@@ -11,7 +11,10 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
   return (
     <div className="carousel">
       {active > 0 && (
-        <button className="nav left" onClick={() => setActive((i) => i - 1)}>
+        <button
+          className="nav left-nav-carousel"
+          onClick={() => setActive((i) => i - 1)}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="53"
@@ -36,7 +39,7 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
             "--offset": (active - i) / 5,
             "--direction": Math.sign(active - i),
             "--abs-offset": Math.abs(active - i) / 3,
-            "pointerEvents": active === i ? "auto" : "none",
+            pointerEvents: active === i ? "auto" : "none",
             opacity: Math.abs(active - i) >= MAX_VISIBILITY ? "0" : "1",
             display: Math.abs(active - i) > MAX_VISIBILITY ? "none" : "block",
           }}
@@ -45,7 +48,10 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
         </div>
       ))}
       {active < count - 1 && (
-        <button className="nav right" onClick={() => setActive((i) => i + 1)}>
+        <button
+          className="nav right-nav-carousel"
+          onClick={() => setActive((i) => i + 1)}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="53"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3b4d8cf..c90d837 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -36,16 +36,15 @@
     user-select: none;
     background: unset;
     border: unset;
-    &.left {
-      transform: translateX(-120%) translatey(-50%);
-    }
-
-    &.right {
-      right: 0;
-      transform: translateX(120%) translatey(-50%);
-    }
   }
 
+  .left-nav-carousel {
+    transform: translateX(-120%) translatey(-50%);
+  }
+  .right-nav-carousel {
+    right: 0;
+    transform: translateX(120%) translatey(-50%);
+  }
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;