create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/client/pages/PublishPage.tsx

@@ -0,0 +1,336 @@
+import { useState, FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import { Upload, Plus, X, Rocket } from 'lucide-react'
+import { usePluginStore } from '@client/stores/pluginStore'
+import { LoadingSpinner } from '@client/components'
+import type { CreatePluginInput } from '@shared/schemas'
+
+export const PublishPage: React.FC = () => {
+  const loading = usePluginStore(state => state.loading)
+  const error = usePluginStore(state => state.error)
+  const createPlugin = usePluginStore(state => state.createPlugin)
+  const clearError = usePluginStore(state => state.clearError)
+
+  const navigate = useNavigate()
+
+  const [form, setForm] = useState<CreatePluginInput>({
+    name: '',
+    slug: '',
+    description: '',
+    repositoryUrl: undefined,
+    homepageUrl: undefined,
+    npmPackage: undefined,
+    license: undefined,
+    tags: [],
+    commands: [],
+  })
+  const [tagInput, setTagInput] = useState('')
+  const [commandName, setCommandName] = useState('')
+  const [commandDesc, setCommandDesc] = useState('')
+
+  const handleAddTag = () => {
+    if (tagInput.trim() && !(form.tags || []).includes(tagInput.trim())) {
+      setForm(prev => ({ ...prev, tags: [...(prev.tags || []), tagInput.trim()] }))
+      setTagInput('')
+    }
+  }
+
+  const handleRemoveTag = (tag: string) => {
+    setForm(prev => ({ ...prev, tags: (prev.tags || []).filter(t => t !== tag) }))
+  }
+
+  const handleAddCommand = () => {
+    if (commandName.trim()) {
+      setForm(prev => ({
+        ...prev,
+        commands: [
+          ...(prev.commands || []),
+          { name: commandName.trim(), description: commandDesc.trim() || undefined },
+        ],
+      }))
+      setCommandName('')
+      setCommandDesc('')
+    }
+  }
+
+  const handleRemoveCommand = (index: number) => {
+    setForm(prev => ({
+      ...prev,
+      commands: (prev.commands || []).filter((_, i) => i !== index),
+    }))
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    clearError()
+    const slug = await createPlugin(form)
+    if (slug) {
+      navigate(`/plugins/${slug}`)
+    }
+  }
+
+  return (
+    <div className="min-h-screen" data-testid="publish-page">
+      <Helmet>
+        <title>Publish Plugin - Plugin Marketplace</title>
+        <meta name="description" content="Publish a new plugin to the marketplace" />
+      </Helmet>
+
+      <div className="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-12 pb-20 px-6">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-2.5 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-xl shadow-lg shadow-violet-500/25">
+              <Rocket className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight">Publish Plugin</h1>
+          </div>
+          <p className="text-purple-200/70 text-lg">Share your creation with the community</p>
+        </div>
+      </div>
+
+      <div className="max-w-2xl mx-auto px-6 -mt-8 pb-16">
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 text-red-600 rounded-2xl">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="bg-white rounded-2xl shadow-xl shadow-black/5 border border-gray-100 p-7 space-y-5">
+            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <div className="w-1.5 h-6 bg-gradient-to-b from-violet-500 to-fuchsia-500 rounded-full" />
+              Basic Information
+            </h2>
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                Plugin Name <span className="text-red-400">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.name}
+                onChange={e => setForm(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="My Awesome Plugin"
+                required
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                Slug <span className="text-red-400">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.slug}
+                onChange={e =>
+                  setForm(prev => ({
+                    ...prev,
+                    slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'),
+                  }))
+                }
+                placeholder="my-awesome-plugin"
+                required
+                pattern="^[a-z0-9-]+$"
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm font-mono transition-all"
+              />
+              <p className="text-xs text-gray-400 mt-1.5">
+                Lowercase letters, numbers, and hyphens only
+              </p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                Description <span className="text-red-400">*</span>
+              </label>
+              <textarea
+                value={form.description}
+                onChange={e => setForm(prev => ({ ...prev, description: e.target.value }))}
+                placeholder="Describe what your plugin does..."
+                required
+                rows={4}
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm resize-none transition-all"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                  Repository URL
+                </label>
+                <input
+                  type="url"
+                  value={form.repositoryUrl || ''}
+                  onChange={e =>
+                    setForm(prev => ({
+                      ...prev,
+                      repositoryUrl: e.target.value || undefined,
+                    }))
+                  }
+                  placeholder="https://github.com/..."
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                  Homepage URL
+                </label>
+                <input
+                  type="url"
+                  value={form.homepageUrl || ''}
+                  onChange={e =>
+                    setForm(prev => ({
+                      ...prev,
+                      homepageUrl: e.target.value || undefined,
+                    }))
+                  }
+                  placeholder="https://..."
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-1.5">
+                  NPM Package
+                </label>
+                <input
+                  type="text"
+                  value={form.npmPackage || ''}
+                  onChange={e =>
+                    setForm(prev => ({ ...prev, npmPackage: e.target.value || undefined }))
+                  }
+                  placeholder="@scope/package-name"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-1.5">License</label>
+                <input
+                  type="text"
+                  value={form.license || ''}
+                  onChange={e =>
+                    setForm(prev => ({ ...prev, license: e.target.value || undefined }))
+                  }
+                  placeholder="MIT"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl shadow-black/5 border border-gray-100 p-7 space-y-4">
+            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <div className="w-1.5 h-6 bg-gradient-to-b from-violet-500 to-fuchsia-500 rounded-full" />
+              Tags
+            </h2>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={tagInput}
+                onChange={e => setTagInput(e.target.value)}
+                onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), handleAddTag())}
+                placeholder="Add a tag..."
+                className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+              />
+              <button
+                type="button"
+                onClick={handleAddTag}
+                className="p-2.5 bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-xl hover:from-violet-400 hover:to-fuchsia-400 transition-all shadow-sm"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+            </div>
+            {form.tags && form.tags.length > 0 && (
+              <div className="flex items-center gap-2 flex-wrap">
+                {form.tags.map(tag => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-violet-50 to-fuchsia-50 text-violet-700 rounded-lg text-sm font-medium"
+                  >
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(tag)}
+                      className="hover:text-red-500 transition-colors"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl shadow-black/5 border border-gray-100 p-7 space-y-4">
+            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <div className="w-1.5 h-6 bg-gradient-to-b from-violet-500 to-fuchsia-500 rounded-full" />
+              Commands
+            </h2>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={commandName}
+                onChange={e => setCommandName(e.target.value)}
+                placeholder="Command name"
+                className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+              />
+              <input
+                type="text"
+                value={commandDesc}
+                onChange={e => setCommandDesc(e.target.value)}
+                placeholder="Description (optional)"
+                className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none text-sm transition-all"
+              />
+              <button
+                type="button"
+                onClick={handleAddCommand}
+                className="p-2.5 bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-xl hover:from-violet-400 hover:to-fuchsia-400 transition-all shadow-sm"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+            </div>
+            {form.commands && form.commands.length > 0 && (
+              <div className="space-y-2">
+                {form.commands.map((cmd, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100"
+                  >
+                    <code className="text-sm font-mono text-violet-600 font-semibold bg-violet-50 px-2 py-0.5 rounded">
+                      {cmd.name}
+                    </code>
+                    {cmd.description && (
+                      <span className="text-sm text-gray-500">{cmd.description}</span>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveCommand(i)}
+                      className="ml-auto p-1 text-gray-400 hover:text-red-500 transition-colors"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading || !form.name || !form.slug || !form.description}
+            className="w-full py-4 bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-2xl hover:from-violet-400 hover:to-fuchsia-400 disabled:from-gray-300 disabled:to-gray-300 disabled:cursor-not-allowed transition-all font-semibold text-base flex items-center justify-center gap-2 shadow-lg shadow-violet-500/20"
+          >
+            {loading ? (
+              <LoadingSpinner size="sm" color="text-white" />
+            ) : (
+              <Upload className="w-5 h-5" />
+            )}
+            Publish Plugin
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

package/template/src/client/pages/RegisterPage.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import { UserPlus } from 'lucide-react'
+import { useAuthStore } from '@client/stores/authStore'
+
+export const RegisterPage: React.FC = () => {
+  const navigate = useNavigate()
+  const register = useAuthStore(state => state.register)
+  const loading = useAuthStore(state => state.loading)
+  const error = useAuthStore(state => state.error)
+  const clearError = useAuthStore(state => state.clearError)
+
+  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await register(username, email, password)
+    const state = useAuthStore.getState()
+    if (!state.error) {
+      navigate('/login')
+    }
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>Register - Biomimic App</title>
+      </Helmet>
+      <div className="min-h-[calc(100vh-200px)] flex items-center justify-center">
+        <div className="w-full max-w-md" data-testid="register-page">
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
+            <div className="text-center mb-6">
+              <div className="inline-flex items-center justify-center w-12 h-12 bg-green-100 rounded-full mb-3">
+                <UserPlus className="w-6 h-6 text-green-600" />
+              </div>
+              <h1 className="text-2xl font-bold text-gray-900">Create Account</h1>
+              <p className="text-sm text-gray-500 mt-1">Join Biomimic App today</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+                  Username
+                </label>
+                <input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={e => {
+                    setUsername(e.target.value)
+                    if (error) clearError()
+                  }}
+                  placeholder="Choose a username"
+                  required
+                  data-testid="register-username"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={e => {
+                    setEmail(e.target.value)
+                    if (error) clearError()
+                  }}
+                  placeholder="Enter your email"
+                  required
+                  data-testid="register-email"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={e => {
+                    setPassword(e.target.value)
+                    if (error) clearError()
+                  }}
+                  placeholder="Choose a password (min 6 chars)"
+                  required
+                  minLength={6}
+                  data-testid="register-password"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+
+              {error && (
+                <div
+                  className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2"
+                  data-testid="register-error"
+                >
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading}
+                data-testid="register-submit"
+                className="w-full py-2 px-4 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {loading ? 'Creating account...' : 'Create Account'}
+              </button>
+            </form>
+
+            <p className="mt-4 text-center text-sm text-gray-500">
+              Already have an account?{' '}
+              <Link
+                to="/login"
+                className="text-blue-600 hover:text-blue-700 font-medium"
+                data-testid="register-login-link"
+              >
+                Sign in
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/template/src/client/pages/SearchPage.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect, FormEvent } from 'react'
+import { Link } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import { Search, Tag, Download, ChevronLeft, ChevronRight, SlidersHorizontal } from 'lucide-react'
+import { usePluginStore } from '@client/stores/pluginStore'
+import { LoadingSpinner, EmptyState, StatusBadge } from '@client/components'
+
+export const SearchPage: React.FC = () => {
+  const plugins = usePluginStore(state => state.plugins)
+  const loading = usePluginStore(state => state.loading)
+  const error = usePluginStore(state => state.error)
+  const searchQuery = usePluginStore(state => state.searchQuery)
+  const categories = usePluginStore(state => state.categories)
+  const selectedCategory = usePluginStore(state => state.selectedCategory)
+  const pagination = usePluginStore(state => state.pagination)
+  const searchPlugins = usePluginStore(state => state.searchPlugins)
+  const fetchCategories = usePluginStore(state => state.fetchCategories)
+  const setSearchQuery = usePluginStore(state => state.setSearchQuery)
+  const setSelectedCategory = usePluginStore(state => state.setSelectedCategory)
+
+  const [inputValue, setInputValue] = useState(searchQuery)
+
+  useEffect(() => {
+    fetchCategories()
+  }, [fetchCategories])
+
+  useEffect(() => {
+    if (searchQuery) {
+      searchPlugins(searchQuery, 1)
+    }
+  }, [selectedCategory]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault()
+    if (inputValue.trim()) {
+      setSearchQuery(inputValue.trim())
+      searchPlugins(inputValue.trim(), 1)
+    }
+  }
+
+  const totalPages = Math.ceil(pagination.total / pagination.limit)
+
+  return (
+    <div className="min-h-screen" data-testid="search-page">
+      <Helmet>
+        <title>Search Plugins - Plugin Marketplace</title>
+        <meta name="description" content="Search for plugins" />
+      </Helmet>
+
+      <div className="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-12 pb-20 px-6">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="p-2.5 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-xl shadow-lg shadow-violet-500/25">
+              <Search className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight">Search Plugins</h1>
+          </div>
+          <form onSubmit={handleSearch}>
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <input
+                type="text"
+                value={inputValue}
+                onChange={e => setInputValue(e.target.value)}
+                placeholder="Search for plugins by name, tag, or keyword..."
+                className="w-full pl-12 pr-36 py-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl focus:ring-2 focus:ring-violet-400 focus:border-transparent outline-none text-white placeholder-purple-200/40 text-base"
+              />
+              <button
+                type="submit"
+                disabled={!inputValue.trim() || loading}
+                className="absolute right-2 top-1/2 -translate-y-1/2 px-6 py-2.5 bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-xl hover:from-violet-400 hover:to-fuchsia-400 disabled:from-gray-600 disabled:to-gray-600 disabled:cursor-not-allowed transition-all font-semibold text-sm shadow-md"
+              >
+                {loading ? <LoadingSpinner size="sm" color="text-white" /> : 'Search'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="max-w-3xl mx-auto px-6 -mt-6 pb-16">
+        <div className="bg-white rounded-2xl shadow-xl shadow-black/5 border border-gray-100 p-4 mb-6">
+          <div className="flex items-center gap-3 flex-wrap">
+            <SlidersHorizontal className="w-4 h-4 text-gray-400 shrink-0" />
+            <button
+              onClick={() => setSelectedCategory(null)}
+              className={`px-3.5 py-1.5 text-sm rounded-lg transition-all font-medium ${
+                !selectedCategory
+                  ? 'bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white shadow-sm'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              All
+            </button>
+            {categories.map(cat => (
+              <button
+                key={cat.id}
+                onClick={() => setSelectedCategory(cat.slug)}
+                className={`px-3.5 py-1.5 text-sm rounded-lg transition-all font-medium ${
+                  selectedCategory === cat.slug
+                    ? 'bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white shadow-sm'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {cat.icon && <span className="mr-1">{cat.icon}</span>}
+                {cat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 text-red-600 rounded-2xl">
+            {error}
+          </div>
+        )}
+
+        {loading && plugins.length === 0 ? (
+          <div className="flex items-center justify-center py-20">
+            <LoadingSpinner size="lg" />
+          </div>
+        ) : plugins.length === 0 && searchQuery ? (
+          <EmptyState
+            icon={Search}
+            title={`No results for "${searchQuery}"`}
+            description="Try a different search term"
+          />
+        ) : plugins.length === 0 ? (
+          <EmptyState icon={Search} title="Start searching for plugins" />
+        ) : (
+          <>
+            <p className="text-sm text-gray-500 mb-4">
+              Found <span className="font-semibold text-gray-700">{pagination.total}</span> results
+            </p>
+            <div className="space-y-3">
+              {plugins.map(plugin => (
+                <Link
+                  key={plugin.id}
+                  to={`/plugins/${plugin.slug}`}
+                  className="group flex items-start gap-4 p-5 bg-white rounded-2xl border border-gray-100 hover:border-violet-200 hover:shadow-lg hover:shadow-violet-500/5 transition-all duration-300"
+                >
+                  <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-violet-100 to-fuchsia-100 flex items-center justify-center text-lg font-bold text-violet-600 shrink-0">
+                    {plugin.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-base font-semibold text-gray-900 group-hover:text-violet-700 transition-colors">
+                        {plugin.name}
+                      </h3>
+                      <StatusBadge label={`v${plugin.version}`} colorScheme="purple" />
+                    </div>
+                    <p className="text-sm text-gray-500 mt-0.5">by {plugin.authorName}</p>
+                    <p className="text-sm text-gray-600 mt-1.5 line-clamp-2 leading-relaxed">
+                      {plugin.description}
+                    </p>
+                    <div className="mt-2.5 flex items-center gap-4 text-xs text-gray-400">
+                      <span className="flex items-center gap-1">
+                        <Download className="w-3.5 h-3.5" />
+                        {plugin.downloadCount}
+                      </span>
+                      {plugin.tags &&
+                        plugin.tags.slice(0, 3).map(tag => (
+                          <span
+                            key={tag}
+                            className="inline-flex items-center px-2 py-0.5 bg-gray-50 text-gray-500 rounded-md"
+                          >
+                            <Tag className="w-2.5 h-2.5 mr-0.5 opacity-50" />
+                            {tag}
+                          </span>
+                        ))}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="mt-10 flex items-center justify-center gap-3">
+                <button
+                  onClick={() => searchPlugins(searchQuery, pagination.page - 1)}
+                  disabled={pagination.page <= 1}
+                  className="p-2.5 rounded-xl bg-white border border-gray-200 hover:border-violet-300 hover:shadow-md disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+                >
+                  <ChevronLeft className="w-5 h-5 text-gray-600" />
+                </button>
+                <div className="px-4 py-2 bg-white rounded-xl border border-gray-200 text-sm text-gray-600">
+                  <span className="font-semibold text-gray-900">{pagination.page}</span>
+                  <span className="mx-1.5 text-gray-300">/</span>
+                  {totalPages}
+                </div>
+                <button
+                  onClick={() => searchPlugins(searchQuery, pagination.page + 1)}
+                  disabled={pagination.page >= totalPages}
+                  className="p-2.5 rounded-xl bg-white border border-gray-200 hover:border-violet-300 hover:shadow-md disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+                >
+                  <ChevronRight className="w-5 h-5 text-gray-600" />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}