Shadcn terry testing -- delete

website/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils"
+  }
+}

website/components/forms/FormButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { useFormState } from 'react-final-form'
 import { cn } from '~/lib/utils'
-import Button, { ButtonProps } from '../ui/Button'
+import { Button, ButtonProps } from '../ui/button'
 
 export interface FormButtonProps extends ButtonProps {}
 

website/components/forms/FormInput.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, forwardRef, PropsWithoutRef } from 'react'
 import { useField, UseFieldConfig } from 'react-final-form'
-import Input from '../ui/Input'
+import { Input } from '~/components/ui/input'
 import Label from '../ui/Label'
 import { cn } from '~/lib/utils'
 

website/components/layouts/Footer.tsx

@@ -1,28 +1,25 @@
-import { cn } from '~/lib/utils'
+import Link from 'next/link'
 
-export interface FooterProps {
-  gradientBg?: boolean
-}
+export const links = [
+  { title: ` © Supabase`, url: 'https://supabase.com/' },
+  { title: 'FAQs', url: '/faq' },
+  { title: 'Open Source', url: 'https://supabase.com/open-source' },
+  { title: 'Privacy Settings', url: 'https://supabase.com/privacy' },
+]
 
-const Footer = ({ gradientBg = false }: FooterProps) => {
-  return (
-    <footer
-      className={cn(
-        'flex items-center w-full h-12 px-4 py-4 border-t border-gray-100 bg-white ',
-        'dark:border-slate-700 dark:text-slate-400 dark:bg-slate-800',
-        gradientBg ? 'dark:!bg-slate-900' : '!bg-white'
-      )}
-    >
-      <a
-        className="flex items-center justify-center gap-2"
-        href="https://supabase.com"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        &copy; Supabase
-      </a>
-    </footer>
-  )
-}
+const Footer = () => (
+  <footer
+    role="menu"
+    className="border-t py-4 w-full px-4 flex justify-between"
+  >
+    <ul className="flex items-center gap-4 text-xs md:text-sm">
+      {links.map((link, index) => (
+        <li key={index}>
+          <Link href={link.url}>{link.title}</Link>
+        </li>
+      ))}
+    </ul>
+  </footer>
+)
 
 export default Footer

website/components/layouts/Layout.tsx

@@ -9,31 +9,25 @@ export type LayoutProps = {
 }
 
 const Layout = ({
-  gradientBg = false,
   containerWidth = 'md',
   children,
 }: PropsWithChildren<LayoutProps>) => {
   return (
-    <div
-      className={cn(
-        'flex flex-col min-h-full',
-        !gradientBg
-          ? 'bg-white dark:bg-slate-900'
-          : 'bg-gradient-to-b from-gray-100 via-gray-100 to-white dark:from-slate-900 dark:to-slate-800'
-      )}
-    >
+    <div>
       <Navbar />
 
       <main
         className={cn(
           'flex flex-col flex-1 w-full mt-8',
-          containerWidth === 'md' ? 'max-w-4xl 2xl:max-w-3xl px-4 mx-auto' : ''
+          containerWidth === 'md'
+            ? 'max-w-4xl 2xl:max-w-3xl px-4 mx-auto'
+            : 'px-4'
         )}
       >
         {children}
       </main>
 
-      <Footer gradientBg />
+      <Footer />
     </div>
   )
 }

website/components/layouts/Navbar.tsx

@@ -17,6 +17,7 @@ import { useUser } from '~/lib/auth'
 import { getAvatarUrl } from '~/lib/avatars'
 import { useTheme } from '../themes/ThemeContext'
 import ThemeSwitcher from '../themes/ThemeSwitcher'
+import { Button } from '~/components/ui/button'
 
 const Navbar = () => {
   const router = useRouter()
@@ -76,7 +77,7 @@ const Navbar = () => {
     )
 
   return (
-    <header className="px-4 py-4 border-b border-gray-100 shadow-sm dark:border-slate-700 md:px-8">
+    <header className="px-4 py-2 border-b border-gray-100 dark:border-slate-700 md:px-8">
       {/* sticky top-0 bg-gray-100 dark:bg-slate-900 */}
       <nav className="flex items-center justify-between gap-4 md:gap-6">
         <div>
@@ -151,19 +152,15 @@ const Navbar = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             ) : (
-              <div className="flex items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600">
-                <Link
-                  href="/sign-up"
-                  className="px-1 sm:px-4 py-1 sm:py-2  transition border border-gray-300 rounded hover:text-gray-800 dark:text-slate-400 hover:border-gray-500 dark:border-slate-700 dark:hover:bg-slate-800 hover:dark:text-white"
-                >
-                  Sign Up
-                </Link>
-                <Link
-                  href="/sign-in"
-                  className="text-sm transition hover:text-gray-800 dark:text-slate-400 hover:dark:text-white"
-                >
-                  Sign In
-                </Link>
+              <div className="flex items-center ">
+                <Button variant="link" asChild>
+                  <Link href="https://supabase.github.io/dbdev/" target="blank">
+                    Docs
+                  </Link>
+                </Button>
+                <Button variant="link" asChild>
+                  <Link href="/sign-up">Login</Link>
+                </Button>
               </div>
             )}
           </div>

website/components/packages/PackageCard.tsx

@@ -19,7 +19,7 @@ const PackageCard = ({ pkg, className }: PackageCardProps) => {
       key={pkg.package_name}
       href={`/${pkg.handle}/${pkg.partial_name}`}
       className={cn(
-        'col-span-4 bg-gradient-to-br from-white via-white to-gray-100 rounded-lg px-6 py-5 transition duration-300 group hover:shadow-xl opacity-90 hover:opacity-100 border border-gray-200',
+        'col-span-4  from-white via-white to-gray-100 rounded-lg px-6 py-5 transition duration-300 group hover:shadow-md opacity-90 hover:opacity-100 border border-gray-200',
         'dark:from-slate-600 dark:to-slate-800 dark:border-slate-800',
         className
       )}
@@ -30,8 +30,9 @@ const PackageCard = ({ pkg, className }: PackageCardProps) => {
             {pkg.partial_name}{' '}
           </p>
 
-          <p className="font-normal text-gray-400">•</p>
-          <p className="font-normal text-gray-400">{pkg.latest_version}</p>
+          <p className="font-mono text-xs text-gray-400">
+            v{pkg.latest_version}
+          </p>
         </div>
         <ArrowTopRightOnSquareIcon
           className="w-4 h-4 text-gray-400 transition group-hover:text-gray-600 dark:group-hover:text-gray-200"

website/components/search/SearchInput.tsx

@@ -1,5 +1,5 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import { forwardRef } from 'react'
+import { Input } from '~/components/ui/input'
 
 export type SearchInputProps = {
   value: string
@@ -10,27 +10,15 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   function SearchInput({ value, onChange }, ref) {
     return (
       <>
-        <label htmlFor="search" className="sr-only">
-          Search Packages
-        </label>
-        <div className="relative">
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <MagnifyingGlassIcon
-              className="w-5 h-5 text-gray-400"
-              aria-hidden="true"
-            />
-          </div>
-          <input
-            ref={ref}
-            id="search"
-            name="search"
-            className="block w-full py-2.5 pl-10 pr-3 text-sm placeholder-gray-500 bg-white border border-gray-300 rounded-md focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-slate-800 dark:border-slate-700 dark:text-white"
-            placeholder="Search Packages"
-            type="search"
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-          />
-        </div>
+        <Input
+          ref={ref}
+          id="search"
+          name="search"
+          placeholder="Search Packages"
+          type="search"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
       </>
     )
   }

website/components/ui/Button.tsx

@@ -1,60 +1,56 @@
-import { cva, VariantProps } from 'class-variance-authority'
-import { ButtonHTMLAttributes, forwardRef } from 'react'
-import { cn } from '~/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-export const buttonVariants = cva(
-  'active:scale-95 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800',
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors 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:
-          'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          'bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100',
-        subtle:
-          'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100',
-        ghost:
-          'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
-        link: 'bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent',
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-10 py-2 px-4',
-        sm: 'h-9 px-2 rounded-md',
-        lg: 'h-11 px-8 rounded-md',
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
 )
 
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      >
-        {children}
-      </Comp>
+      />
     )
   }
 )
+Button.displayName = "Button"
 
-Button.displayName = 'Button'
-
-export default Button
+export { Button, buttonVariants }

website/components/ui/CopyButton.tsx

@@ -57,7 +57,7 @@ const CopyButton = ({
     <button
       className={cn(
         copyButtonVariants({ variant }),
-        'bg-gray-50 dark:bg-gray-400 dark:hover:bg-gray-200',
+        'bg-gray-50 text-slate-700 dark:text-slate-100 dark:bg-gray-700 dark:hover:bg-gray-900 transition-colors',
         className
       )}
       onClick={() => {