Showcase improvements

Author: tannerlinsley

src/components/ImageUpload.tsx

@@ -103,7 +103,7 @@ export function ImageUpload({
     ? 'w-24'
     : aspectRatio === 'video'
       ? 'max-w-md'
-      : 'w-32'
+      : 'w-40'
 
   return (
     <div className={className}>
@@ -154,38 +154,38 @@ export function ImageUpload({
           )}
         >
           {isUploading ? (
-            <>
+            <div className="p-4 text-center">
               <Loader2
                 className={twMerge(
-                  'text-blue-500 animate-spin',
+                  'text-blue-500 animate-spin mx-auto',
                   isSmall ? 'w-5 h-5' : 'w-8 h-8',
                 )}
               />
               {!isSmall && (
-                <span className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
                   Uploading...
                 </span>
               )}
-            </>
+            </div>
           ) : (
-            <>
+            <div className="p-4 text-center">
               <Upload
                 className={twMerge(
-                  'text-gray-400',
+                  'text-gray-400 mx-auto',
                   isSmall ? 'w-5 h-5' : 'w-8 h-8',
                 )}
               />
               {!isSmall && (
                 <>
-                  <span className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                  <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
                     Click or drag to upload
                   </span>
-                  <span className="mt-1 text-xs text-gray-500">
+                  <span className="mt-1 block text-xs text-gray-500">
                     PNG, JPG up to 4MB
                   </span>
                 </>
               )}
-            </>
+            </div>
           )}
         </div>
       )}

src/components/Navbar.tsx

@@ -29,6 +29,7 @@ import {
   Grid2X2,
   LogOut,
   Settings,
+  Sparkles,
 } from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
 import { SearchButton } from './SearchButton'
@@ -541,6 +542,11 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             icon: <Users />,
             to: '/partners',
           },
+          {
+            label: 'Showcase',
+            icon: <Sparkles />,
+            to: '/showcase',
+          },
           {
             label: 'Blog',
             icon: <Music />,

src/components/PartnersSection.tsx

@@ -4,6 +4,7 @@ import { partners } from '~/utils/partners'
 import { PartnersGrid } from './PartnersGrid'
 import { PartnershipCallout } from './PartnershipCallout'
 import { LibraryId } from '~/libraries'
+import { Button } from './Button'
 
 type PartnersSectionProps = {
   libraryId?: LibraryId
@@ -37,17 +38,17 @@ export function PartnersSection({
           <PartnershipCallout libraryId={libraryId} />
           {showPreviousLink ? (
             <div className="text-center mt-6">
-              <Link
+              <Button
+                as={Link}
                 to="/partners"
                 search={
                   libraryId
                     ? { libraries: [libraryId], status: 'inactive' }
                     : { status: 'inactive' }
                 }
-                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-xs hover:shadow-sm hover:border-gray-400 dark:hover:border-gray-700 transition-all"
               >
                 View Previous Partners →
-              </Link>
+              </Button>
             </div>
           ) : null}
         </div>

src/components/ShowcaseSection.tsx

@@ -7,14 +7,44 @@ import {
 } from '~/queries/showcases'
 import { ShowcaseCard, ShowcaseCardSkeleton } from './ShowcaseCard'
 import { buttonStyles } from './Button'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight, Plus } from 'lucide-react'
 
 interface ShowcaseSectionProps {
   title?: string
   subtitle?: string
   libraryId?: string
   limit?: number
   showViewAll?: boolean
+  minItems?: number
+}
+
+function SubmitShowcasePlaceholder({ libraryId }: { libraryId?: string }) {
+  return (
+    <Link
+      to="/showcase/submit"
+      search={libraryId ? { libraryId } : undefined}
+      className="group block rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500"
+    >
+      <div className="aspect-video flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
+        <div className="text-center p-6">
+          <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 transition-colors">
+            <Plus className="w-6 h-6 text-gray-400 group-hover:text-blue-500 transition-colors" />
+          </div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+            Submit your project
+          </p>
+        </div>
+      </div>
+      <div className="p-4">
+        <h3 className="font-bold text-lg text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+          Your Project Here
+        </h3>
+        <p className="text-sm text-gray-500 dark:text-gray-500 mt-1">
+          Share what you've built with the community
+        </p>
+      </div>
+    </Link>
+  )
 }
 
 export function ShowcaseSection({
@@ -23,6 +53,7 @@ export function ShowcaseSection({
   libraryId,
   limit = 6,
   showViewAll = true,
+  minItems = 3,
 }: ShowcaseSectionProps) {
   const queryOptions = libraryId
     ? getShowcasesByLibraryQueryOptions({ libraryId, limit })
@@ -31,11 +62,7 @@ export function ShowcaseSection({
   const { data, isLoading } = useQuery(queryOptions)
 
   const showcases = data?.showcases || []
-
-  // Don't render anything if no showcases
-  if (!isLoading && showcases.length === 0) {
-    return null
-  }
+  const placeholdersNeeded = Math.max(0, minItems - showcases.length)
 
   return (
     <section className="py-16">
@@ -50,7 +77,7 @@ export function ShowcaseSection({
 
       {isLoading ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {Array.from({ length: limit }).map((_, i) => (
+          {Array.from({ length: Math.max(limit, minItems) }).map((_, i) => (
             <ShowcaseCardSkeleton key={i} />
           ))}
         </div>
@@ -59,11 +86,17 @@ export function ShowcaseSection({
           {showcases.map(({ showcase, user }) => (
             <ShowcaseCard key={showcase.id} showcase={showcase} user={user} />
           ))}
+          {Array.from({ length: placeholdersNeeded }).map((_, i) => (
+            <SubmitShowcasePlaceholder
+              key={`placeholder-${i}`}
+              libraryId={libraryId}
+            />
+          ))}
         </div>
       )}
 
       {showViewAll && (
-        <div className="mt-8 text-center">
+        <div className="mt-8 flex justify-center">
           <Link
             to="/showcase"
             search={libraryId ? { libraryId } : undefined}

src/components/ShowcaseSubmitForm.tsx

@@ -151,6 +151,25 @@ export function ShowcaseSubmitForm() {
             />
           </div>
 
+          {/* Project URL */}
+          <div>
+            <label
+              htmlFor="url"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Project URL *
+            </label>
+            <input
+              type="url"
+              id="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              required
+              className="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="https://your-project.com"
+            />
+          </div>
+
           {/* Tagline */}
           <div>
             <label
@@ -192,25 +211,6 @@ export function ShowcaseSubmitForm() {
             />
           </div>
 
-          {/* Project URL */}
-          <div>
-            <label
-              htmlFor="url"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >
-              Project URL *
-            </label>
-            <input
-              type="url"
-              id="url"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              required
-              className="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="https://your-project.com"
-            />
-          </div>
-
           {/* Screenshot */}
           <ImageUpload
             value={screenshotUrl}

src/routes/_libraries/index.tsx

@@ -28,6 +28,7 @@ import { Layers, Zap, Shield, Code2 } from 'lucide-react'
 import { Card } from '~/components/Card'
 import LibraryCard from '~/components/LibraryCard'
 import { FeaturedShowcases } from '~/components/ShowcaseSection'
+import { Button } from '~/components/Button'
 
 export const textColors = [
   `text-rose-500`,
@@ -250,25 +251,9 @@ function Index() {
         </div>
 
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto mt-8 text-center">
-          <Link
-            to="/libraries"
-            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-xs hover:shadow-sm hover:border-gray-400 dark:hover:border-gray-600 hover:-translate-y-1 transition-all duration-300 text-gray-900 dark:text-gray-100 font-medium"
-          >
-            <span>More Libraries</span>
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </Link>
+          <Button as={Link} to="/libraries">
+            More Libraries →
+          </Button>
         </div>
 
         {/* Why TanStack Section */}
@@ -527,12 +512,9 @@ function Index() {
             ))}
           </div>
           <div className="text-center mt-6">
-            <Link
-              to="/maintainers"
-              className="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
-            >
+            <Button as={Link} to="/maintainers">
               View All Maintainers →
-            </Link>
+            </Button>
           </div>
         </div>