feat: add custom UI components including animated tabs and utility functions

Author: HackStyx

src/components/ui/Tabs.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
+import { cn } from "../../lib/utils";
+
+const Tabs = ({
+  tabs: propTabs,
+  containerClassName,
+  activeTabClassName,
+  tabClassName,
+  contentClassName,
+  theme = 'light',
+}) => {
+  const currentTheme = theme;
+  const [active, setActive] = useState(propTabs[0]);
+  const [tabs, setTabs] = useState(propTabs);
+
+  // Force re-render when theme changes
+  useEffect(() => {
+    setTabs([...propTabs]);
+  }, [theme, propTabs]);
+
+  const moveSelectedTabToTop = (idx) => {
+    const newTabs = [...propTabs];
+    const selectedTab = newTabs.splice(idx, 1);
+    newTabs.unshift(selectedTab[0]);
+    setTabs(newTabs);
+    setActive(newTabs[0]);
+  };
+
+  const [hovering, setHovering] = useState(false);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full",
+          containerClassName
+        )}
+      >
+        {propTabs.map((tab, idx) => (
+          <button
+            key={tab.title}
+            onClick={() => {
+              moveSelectedTabToTop(idx);
+            }}
+            onMouseEnter={() => setHovering(true)}
+            onMouseLeave={() => setHovering(false)}
+            className={cn("relative px-4 py-2 rounded-full", tabClassName)}
+            style={{
+              transformStyle: "preserve-3d",
+            }}
+          >
+            {active.value === tab.value && (
+              <motion.div
+                layoutId="clickedbutton"
+                transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}
+                className={cn(
+                  "absolute inset-0 rounded-full",
+                  activeTabClassName
+                )}
+              />
+            )}
+
+            <span className={`relative block ${currentTheme === 'dark' ? 'text-white' : 'text-black'}`}>
+              {tab.title}
+            </span>
+          </button>
+        ))}
+      </div>
+      <FadeInDiv
+        tabs={tabs}
+        active={active}
+        key={active.value}
+        hovering={hovering}
+        className={cn("mt-8", contentClassName)}
+      />
+    </>
+  );
+};
+
+const FadeInDiv = ({
+  className,
+  tabs,
+  hovering,
+}) => {
+  const isActive = (tab) => {
+    return tab.value === tabs[0].value;
+  };
+  return (
+    <div className="relative w-full h-full">
+      {tabs.map((tab, idx) => (
+        <motion.div
+          key={tab.value}
+          layoutId={tab.value}
+          style={{
+            scale: 1 - idx * 0.1,
+            top: hovering ? idx * -50 : 0,
+            zIndex: -idx,
+            opacity: idx < 3 ? 1 - idx * 0.1 : 0,
+          }}
+          animate={{
+            y: isActive(tab) ? [0, 40, 0] : 0,
+          }}
+          className={cn("w-full h-full absolute top-0 left-0", className)}
+        >
+          {tab.content}
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export default Tabs; 

src/config/supabase.js

@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  console.warn('VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY environment variables are not set. Authentication will not work.');
+}
+
+export const supabase = createClient(
+  supabaseUrl || 'https://example.supabase.co',
+  supabaseAnonKey || 'demo-key'
+); 

src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+ 
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}