add supabase and tailwind utils

web/.env.example

@@ -1,4 +1,5 @@
 SESSION_SECRET=fill_me
 SHYFT_API_KEY=fill_me
 WALLET_NETWORK=devnet
-WALLET_ADDRESS=fill_me
+WALLET_ADDRESS=fill_me
+SUPABASE_KEY=fill_me

web/app/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import { Link, useLocation } from '@remix-run/react'
-import clsx from 'clsx'
 
 import { NAVIGATION } from '~/constants'
+import { cn } from '~/utils/styles'
 
 export type NavigationProps = {
   className?: string
@@ -11,7 +11,7 @@ export const Navigation: React.FC<NavigationProps> = ({ className }) => {
   const location = useLocation()
 
   return (
-    <nav className={clsx('text-base lg:text-sm', className)}>
+    <nav className={cn('text-base lg:text-sm', className)}>
       <ul className="space-y-9">
         {NAVIGATION.map((section) => (
           <li key={section.title}>
@@ -25,7 +25,7 @@ export const Navigation: React.FC<NavigationProps> = ({ className }) => {
                 <li key={link.href} className="relative">
                   <Link
                     to={link.href}
-                    className={clsx(
+                    className={cn(
                       'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                       link.href === location.pathname
                         ? 'font-semibold text-sky-500 before:bg-sky-500'

web/app/components/dialogs/StyledDialog.tsx

@@ -1,9 +1,9 @@
 import { Dialog } from '@headlessui/react';
-import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { PropsWithChildren } from 'react';
 
 import { transitionVariants } from '../../utils/motion';
+import { cn } from '~/utils/styles';
 
 interface StyledDialogProps extends PropsWithChildren {
   isOpen: boolean;
@@ -46,7 +46,7 @@ export default function StyledDialog({
             initial="growOut"
             animate="growIn"
             exit="growOut"
-            className={clsx(
+            className={cn(
               `flex w-full max-w-[92rem] items-center justify-center`,
               className
             )}

web/app/components/dialogs/WalletDialog.tsx

@@ -1,11 +1,11 @@
 import { Dialog } from '@headlessui/react'
 import { Link } from '@remix-run/react'
-import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 
 import { useSolanaWallet } from '~/hooks'
 import { transitionVariants } from '~/utils/motion'
+import { cn } from '~/utils/styles'
 
 interface WalletDialogProps {
   className?: string
@@ -53,7 +53,7 @@ export default function WalletDialog({
             initial="growOut"
             animate="growIn"
             exit="growOut"
-            className={clsx(
+            className={cn(
               `flex w-full max-w-2xl items-center justify-center bg-light p-5 rounded-3xl`,
               className
             )}

web/app/components/ui/Avatar.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import type {
   HTMLAttributes,
   PropsWithChildren,
@@ -23,7 +23,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
     const link = href ?? '#'
     return (
       <div
-        className={clsx('flex items-start gap-3 pt-3', className)}
+        className={cn('flex items-start gap-3 pt-3', className)}
         ref={innerRef}
         {...rest}
       >

web/app/components/ui/Badge.tsx

@@ -1,12 +1,12 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import React, { HTMLAttributes } from 'react'
 
 type BadgeProps = HTMLAttributes<HTMLSpanElement>
 
 const Badge: React.FC<BadgeProps> = ({ children, className, ...rest }) => {
   return (
     <span
-      className={clsx(
+      className={cn(
         'mr-2 rounded bg-gray-200 px-2.5 py-2 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300',
         className
       )}

web/app/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import React, { ButtonHTMLAttributes } from 'react'
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
@@ -11,7 +11,7 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <button
-      className={clsx(
+      className={cn(
         'text-sm text-white md:text-base flex-shrink-0 rounded-md border-4 border-dark-gray bg-dark-gray dark:border-primary dark:bg-primary py-2 px-5 hover:border-gray-800 hover:bg-gray-800 dark:hover:border-primary-tint dark:hover:bg-primary-tint focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2',
         className
       )}

web/app/components/ui/Figure.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx'
 import React from 'react'
-
+import { cn } from '~/utils/styles'
 import { with3DHover } from '~/hocs'
 
 type FigureProps = React.DetailedHTMLProps<
@@ -24,15 +23,15 @@ const Figure: React.FC<FigureProps> = ({
 }) => {
   return (
     <figure
-      className={clsx(
+      className={cn(
         'relative max-w-2xl cursor-pointer grayscale filter transition-all duration-300 hover:grayscale-0',
         className
       )}
       {...rest}
     >
       <a href={link}>
         <img
-          className={clsx('rounded-2xl bg-indigo-50 object-cover', imgClass)}
+          className={cn('rounded-2xl bg-indigo-50 object-cover', imgClass)}
           src={imgSrc}
           alt={imgAlt}
         />

web/app/components/ui/Pagination.tsx

@@ -1,6 +1,6 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'
-import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
+import { cn } from '~/utils/styles'
 
 type PaginationProps = PropsWithChildren & {
   className?: string
@@ -9,7 +9,7 @@ type PaginationProps = PropsWithChildren & {
 const Pagination: React.FC<PaginationProps> = ({ className }) => {
   return (
     <nav
-      className={clsx('isolate -space-x-px', className)}
+      className={cn('isolate -space-x-px', className)}
       aria-label="Pagination"
     >
       <a

web/app/components/ui/ThemeButton.tsx

@@ -1,9 +1,7 @@
-
 import { MoonIcon } from '@heroicons/react/20/solid'
 import { SunIcon } from '@heroicons/react/24/outline'
-
-import clsx from 'clsx'
 import React, { ButtonHTMLAttributes } from 'react'
+import { cn } from '~/utils/styles'
 
 import { THEME } from '~/constants'
 import { useTheme } from '~/theme'
@@ -18,7 +16,7 @@ const ThemeButton: React.FC<ThemeButtonProps> = ({ className, ...rest }) => {
         setTheme((prev) => (prev === THEME.DARK ? THEME.LIGHT : THEME.DARK))
       }
       type="button"
-      className={clsx(
+      className={cn(
         'inline-flex flex-none flex-shrink-0 items-center p-2 text-black',
         className
       )}

web/app/components/ui/header/Header.tsx

@@ -1,7 +1,6 @@
 import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { Link } from '@remix-run/react'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
-import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import React, { useState } from 'react'
 import useOnclickOutside from 'react-cool-onclickoutside'
@@ -12,6 +11,7 @@ import { useScroll } from '~/hooks'
 import { MobileNavigation } from '../mobile/Navigation'
 import Search from '../search/Search'
 import ThemeButton from '../ThemeButton'
+import { cn } from '~/utils/styles'
 
 
 type HeaderProps = {
@@ -43,7 +43,7 @@ const Header: React.FC<HeaderProps> = ({ title = 'ConcertX' }) => {
     <AnimatePresence initial={false}>
       <header
         ref={headerRef}
-        className={clsx(
+        className={cn(
           'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-primary-contrast px-4 py-1 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-2xl sm:px-6 lg:px-8',
           isScrolled
             ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'

web/app/components/ui/search/Search.tsx

@@ -1,6 +1,6 @@
 import { MagnifyingGlassIcon, MicrophoneIcon } from '@heroicons/react/20/solid';
 import React, { useId } from 'react';
-import clsx from 'clsx';
+import { cn } from '~/utils/styles';
 
 type SearchProps = {
   className?: string;
@@ -12,7 +12,7 @@ type SearchProps = {
 const Search: React.FC<SearchProps> = ({ className, autoFocus, onFocus, onBlur }) => {
   const searchId = useId();
   return (
-    <form className={clsx('flex items-center', className)}>
+    <form className={cn('flex items-center', className)}>
       <label htmlFor={searchId} className="sr-only">
         Search
       </label>

web/app/constants/api.server.ts

@@ -0,0 +1,6 @@
+import { canUseDOM } from '~/utils/dom';
+import { supabaseKey } from '~/utils/misc.server';
+
+export const SHYFT_API_URL = 'https://api.shyft.to';
+export const SUPABASE_URL = 'https://puonyupeanorfbpjfvpu.supabase.co';
+export const SUPABASE_KEY = canUseDOM ? window.ENV.SUPABASE_KEY : supabaseKey;

web/app/constants/index.ts

@@ -1,5 +1,5 @@
 export * from './links';
 export * from './navigation';
 export * from './theme';
-export * from './api';
+export * from './api.server';
 export * from './wallet';

web/app/env.server.ts

@@ -1,9 +1,10 @@
-import { shyftApiKey, walletNetwork } from '~/utils/misc.server';
+import { shyftApiKey, supabaseKey, walletNetwork } from '~/utils/misc.server';
 
 export function getEnv() {
   return {
     WALLET_NETWORK: walletNetwork,
     SHYFT_API_KEY: shyftApiKey,
+    SUPABASE_KEY: supabaseKey,
   };
 }