@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/tasks/TasksBlock.svelte

@@ -0,0 +1,286 @@
+<!--
+  TasksBlock.svelte
+  Task list table with filtering, pagination, and status/priority badges.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Input,
+    Badge,
+    Avatar,
+    Select,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell,
+    Checkbox,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    tasks = [],
+    title = 'Welcome back!',
+    description = "Here's a list of your tasks for this month!",
+    onfilter,
+    onsort,
+    onpageChange
+  }: {
+    class?: string;
+    tasks?: Array<{
+      id: string;
+      title: string;
+      type: string;
+      status: string;
+      priority: string;
+    }>;
+    title?: string;
+    description?: string;
+    onfilter?: (data: { search: string; status: string; priority: string }) => void;
+    onsort?: (data: { column: string; direction: 'asc' | 'desc' }) => void;
+    onpageChange?: (data: { page: number }) => void;
+  } = $props();
+
+  // Filter state
+  let searchQuery = $state('');
+  let statusFilter = $state('');
+  let priorityFilter = $state('');
+
+  // Pagination state
+  let currentPage = $state(1);
+  let rowsPerPage = $state(10);
+  let selectedRows: Set<string> = $state(new Set());
+
+  // Status options
+  const statusOptions = [
+    { value: '', label: 'All statuses' },
+    { value: 'backlog', label: 'Backlog' },
+    { value: 'todo', label: 'Todo' },
+    { value: 'in-progress', label: 'In Progress' },
+    { value: 'done', label: 'Done' },
+    { value: 'cancelled', label: 'Cancelled' }
+  ];
+
+  const priorityOptions = [
+    { value: '', label: 'All priorities' },
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' }
+  ];
+
+  // Computed
+  let filteredTasks = $derived(tasks.filter(task => {
+    const matchesSearch = !searchQuery || task.title.toLowerCase().includes(searchQuery.toLowerCase()) || task.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = !statusFilter || task.status === statusFilter;
+    const matchesPriority = !priorityFilter || task.priority === priorityFilter;
+    return matchesSearch && matchesStatus && matchesPriority;
+  }));
+
+  let totalPages = $derived(Math.max(1, Math.ceil(filteredTasks.length / rowsPerPage)));
+  let paginatedTasks = $derived(filteredTasks.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage));
+
+  function toggleRowSelection(id: string) {
+    if (selectedRows.has(id)) {
+      selectedRows.delete(id);
+    } else {
+      selectedRows.add(id);
+    }
+    selectedRows = new Set(selectedRows);
+  }
+
+  function getStatusColor(status: string): string {
+    switch (status) {
+      case 'done': return 'bg-green-500';
+      case 'in-progress': return 'bg-blue-500';
+      case 'todo': return 'bg-yellow-500';
+      case 'backlog': return 'bg-gray-400';
+      case 'cancelled': return 'bg-red-500';
+      default: return 'bg-gray-400';
+    }
+  }
+
+  function getTypeBadgeVariant(type: string): 'default' | 'secondary' | 'outline' | 'destructive' {
+    switch (type) {
+      case 'bug': return 'destructive';
+      case 'feature': return 'default';
+      case 'documentation': return 'secondary';
+      default: return 'outline';
+    }
+  }
+
+  function handleFilter() {
+    currentPage = 1;
+    onfilter?.({ search: searchQuery, status: statusFilter, priority: priorityFilter });
+  }
+
+  function goToPage(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+      onpageChange?.({ page });
+    }
+  }
+</script>
+
+<div class={cn('space-y-4', className)}>
+  <!-- Header -->
+  <div class="flex items-start justify-between">
+    <div>
+      <h2 class="text-2xl font-bold tracking-tight">{title}</h2>
+      <p class="text-muted-foreground">{description}</p>
+    </div>
+    <Avatar alt="User" class="h-10 w-10" />
+  </div>
+
+  <!-- Filter Row -->
+  <div class="flex items-center gap-2">
+    <Input
+      type="search"
+      placeholder="Filter tasks..."
+      bind:value={searchQuery}
+      class="max-w-sm"
+      oninput={handleFilter}
+    />
+    <Select
+      options={statusOptions}
+      bind:value={statusFilter}
+      placeholder="Status"
+      onchange={handleFilter}
+    />
+    <Select
+      options={priorityOptions}
+      bind:value={priorityFilter}
+      placeholder="Priority"
+      onchange={handleFilter}
+    />
+    <div class="ml-auto flex items-center gap-1">
+      <!-- Lucide: LayoutList -->
+      <Button variant="outline" size="sm">
+        <span class="text-xs">List</span>
+      </Button>
+      <!-- Lucide: LayoutGrid -->
+      <Button variant="outline" size="sm">
+        <span class="text-xs">Board</span>
+      </Button>
+    </div>
+  </div>
+
+  <!-- Task Table -->
+  <div class="rounded-md border">
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-12">
+            <Checkbox />
+          </TableHead>
+          <TableHead class="w-24">Task</TableHead>
+          <TableHead>Title</TableHead>
+          <TableHead class="w-28">Type</TableHead>
+          <TableHead class="w-32">Status</TableHead>
+          <TableHead class="w-24">Priority</TableHead>
+          <TableHead class="w-12"></TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {#each paginatedTasks as task}
+          <TableRow>
+            <TableCell>
+              <Checkbox
+                checked={selectedRows.has(task.id)}
+                onchange={() => toggleRowSelection(task.id)}
+              />
+            </TableCell>
+            <TableCell class="font-mono text-xs text-muted-foreground">
+              {task.id}
+            </TableCell>
+            <TableCell class="font-medium">
+              {task.title}
+            </TableCell>
+            <TableCell>
+              <Badge variant={getTypeBadgeVariant(task.type)}>
+                {task.type}
+              </Badge>
+            </TableCell>
+            <TableCell>
+              <div class="flex items-center gap-2">
+                <span class={cn('h-2 w-2 rounded-full', getStatusColor(task.status))} />
+                <span class="text-sm capitalize">{task.status.replace('-', ' ')}</span>
+              </div>
+            </TableCell>
+            <TableCell class="capitalize">
+              {task.priority}
+            </TableCell>
+            <TableCell>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button variant="ghost" size="sm" class="h-8 w-8 p-0">
+                    <!-- Lucide: MoreHorizontal -->
+                    <span class="text-xs">...</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem>Copy ID</DropdownMenuItem>
+                  <DropdownMenuItem>Delete</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </TableCell>
+          </TableRow>
+        {:else}
+          <TableRow>
+            <TableCell colspan={7} class="text-center text-muted-foreground py-8">
+              No tasks found.
+            </TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </div>
+
+  <!-- Pagination -->
+  <div class="flex items-center justify-between">
+    <p class="text-sm text-muted-foreground">
+      {selectedRows.size} of {filteredTasks.length} row(s) selected.
+    </p>
+    <div class="flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-muted-foreground">Rows per page</span>
+        <Select
+          options={[
+            { value: '10', label: '10' },
+            { value: '20', label: '20' },
+            { value: '50', label: '50' }
+          ]}
+          value={String(rowsPerPage)}
+          onchange={(e: any) => { rowsPerPage = Number(e.target?.value ?? e.detail?.value ?? rowsPerPage); currentPage = 1; }}
+        />
+      </div>
+      <span class="text-sm text-muted-foreground">
+        Page {currentPage} of {totalPages}
+      </span>
+      <div class="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onclick={() => goToPage(currentPage - 1)}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onclick={() => goToPage(currentPage + 1)}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/tasks/index.ts

@@ -0,0 +1 @@
+export { default as TasksBlock } from './TasksBlock.svelte';

package/src/registry/blocks/team-section/TeamSection01.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface TeamMember {
+    name: string;
+    role?: string;
+    bio?: string;
+    avatarUrl?: string;
+    twitter?: string;
+    linkedin?: string;
+  }
+
+  const defaultMembers: TeamMember[] = [
+    {
+      name: 'Sarah Johnson',
+      role: 'CEO & Co-Founder',
+      bio: 'Passionate about building products that empower designers and developers to create better digital experiences.',
+    },
+    {
+      name: 'Marcus Chen',
+      role: 'CTO & Co-Founder',
+      bio: 'Full-stack engineer with 10+ years building design systems and developer tools.',
+    },
+    {
+      name: 'Priya Patel',
+      role: 'Head of Design',
+      bio: 'Former lead designer at top tech companies, passionate about accessible and beautiful interfaces.',
+    },
+    {
+      name: 'James Rivera',
+      role: 'Head of Engineering',
+      bio: 'Loves clean code, performance optimization, and mentoring engineers.',
+    },
+    {
+      name: 'Lena Schmidt',
+      role: 'Product Manager',
+      bio: 'Bridges design and engineering to ship products users love.',
+    },
+    {
+      name: 'Noah Williams',
+      role: 'Marketing Lead',
+      bio: 'Data-driven marketer focused on developer communities and content.',
+    },
+  ];
+
+  let { class: className, title = 'Meet our team', description = 'Our diverse team of experts is passionate about creating the best possible product for you.', members = defaultMembers } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl">
+    <div class="text-center mb-12">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Team Section</p>
+      <h2 class="text-2xl sm:text-3xl font-bold mb-4">{title}</h2>
+      <p class="text-muted-foreground max-w-2xl mx-auto">{description}</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      {#each members as member}
+        <div class="flex flex-col items-center text-center">
+          <div class="h-16 w-16 rounded-full bg-muted text-sm font-semibold flex items-center justify-center text-muted-foreground mb-4">
+            {member.name
+              .split(' ')
+              .map((n) => n[0])
+              .join('')}
+          </div>
+
+          <h3 class="font-medium text-lg">{member.name}</h3>
+
+          {#if member.role}
+            <p class="text-xs text-muted-foreground font-medium">{member.role}</p>
+          {/if}
+
+          {#if member.bio}
+            <p class="mt-2 text-sm text-muted-foreground">{member.bio}</p>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/team-section/TeamSection02.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface TeamMember {
+    name: string;
+    role?: string;
+    bio?: string;
+    avatarUrl?: string;
+    twitter?: string;
+    linkedin?: string;
+  }
+
+  const defaultMembers: TeamMember[] = [
+    {
+      name: 'Sarah Johnson',
+      role: 'CEO & Co-Founder',
+      bio: 'Passionate about building products that empower designers and developers to create better digital experiences.',
+    },
+    {
+      name: 'Marcus Chen',
+      role: 'CTO & Co-Founder',
+      bio: 'Full-stack engineer with 10+ years building design systems and developer tools.',
+    },
+    {
+      name: 'Priya Patel',
+      role: 'Head of Design',
+      bio: 'Former lead designer at top tech companies, passionate about accessible and beautiful interfaces.',
+    },
+    {
+      name: 'James Rivera',
+      role: 'Head of Engineering',
+      bio: 'Loves clean code, performance optimization, and mentoring engineers.',
+    },
+    {
+      name: 'Lena Schmidt',
+      role: 'Product Manager',
+      bio: 'Bridges design and engineering to ship products users love.',
+    },
+    {
+      name: 'Noah Williams',
+      role: 'Marketing Lead',
+      bio: 'Data-driven marketer focused on developer communities and content.',
+    },
+  ];
+
+  let { class: className, title = 'Meet our team', description = 'Our diverse team of experts is passionate about creating the best possible product for you.', members = defaultMembers } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl">
+    <div class="mb-12">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Team Section</p>
+      <h2 class="text-2xl sm:text-3xl font-bold mb-4">{title}</h2>
+      <p class="text-muted-foreground max-w-2xl">{description}</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      {#each members as member}
+        <div class="flex flex-col items-center text-center">
+          <div class="h-16 w-16 rounded-full bg-muted text-sm font-semibold flex items-center justify-center text-muted-foreground mb-4">
+            {member.name
+              .split(' ')
+              .map((n) => n[0])
+              .join('')}
+          </div>
+
+          <h3 class="font-medium text-lg">{member.name}</h3>
+
+          {#if member.role}
+            <p class="text-xs text-muted-foreground font-medium">{member.role}</p>
+          {/if}
+
+          {#if member.bio}
+            <p class="mt-2 text-sm text-muted-foreground">{member.bio}</p>
+          {/if}
+
+          {#if member.twitter || member.linkedin}
+            <div class="mt-3 flex gap-2">
+              {#if member.twitter}
+                <a href={member.twitter} target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-muted rounded-md transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" class="text-muted-foreground hover:text-foreground">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                  </svg>
+                </a>
+              {/if}
+
+              {#if member.linkedin}
+                <a href={member.linkedin} target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-muted rounded-md transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" class="text-muted-foreground hover:text-foreground">
+                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                    <rect x="2" y="9" width="4" height="12" />
+                    <circle cx="4" cy="4" r="2" />
+                  </svg>
+                </a>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/team-section/TeamSection03.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface TeamMember {
+    name: string;
+    role?: string;
+    bio?: string;
+    avatarUrl?: string;
+    twitter?: string;
+    linkedin?: string;
+  }
+
+  const defaultMembers: TeamMember[] = [
+    {
+      name: 'Sarah Johnson',
+      role: 'CEO & Co-Founder',
+      bio: 'Passionate about building products that empower designers and developers to create better digital experiences.',
+    },
+    {
+      name: 'Marcus Chen',
+      role: 'CTO & Co-Founder',
+      bio: 'Full-stack engineer with 10+ years building design systems and developer tools.',
+    },
+    {
+      name: 'Priya Patel',
+      role: 'Head of Design',
+      bio: 'Former lead designer at top tech companies, passionate about accessible and beautiful interfaces.',
+    },
+    {
+      name: 'James Rivera',
+      role: 'Head of Engineering',
+      bio: 'Loves clean code, performance optimization, and mentoring engineers.',
+    },
+    {
+      name: 'Lena Schmidt',
+      role: 'Product Manager',
+      bio: 'Bridges design and engineering to ship products users love.',
+    },
+    {
+      name: 'Noah Williams',
+      role: 'Marketing Lead',
+      bio: 'Data-driven marketer focused on developer communities and content.',
+    },
+  ];
+
+  let { class: className, title = 'Meet our team', description = 'Our diverse team of experts is passionate about creating the best possible product for you.', members = defaultMembers.slice(0, 4) } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl">
+    <div class="text-center mb-12">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Team Section</p>
+      <h2 class="text-2xl sm:text-3xl font-bold mb-4">{title}</h2>
+      <p class="text-muted-foreground max-w-2xl mx-auto">{description}</p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
+      {#each members as member}
+        <div class="flex flex-col items-center text-center">
+          <div class="h-12 w-12 rounded-full bg-muted text-xs font-semibold flex items-center justify-center text-muted-foreground mb-3">
+            {member.name
+              .split(' ')
+              .map((n) => n[0])
+              .join('')}
+          </div>
+
+          <h3 class="font-medium text-sm">{member.name}</h3>
+
+          {#if member.role}
+            <p class="text-xs text-muted-foreground">{member.role}</p>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/team-section/TeamSection04.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface TeamMember {
+    name: string;
+    role?: string;
+    bio?: string;
+    avatarUrl?: string;
+    twitter?: string;
+    linkedin?: string;
+  }
+
+  const defaultMembers: TeamMember[] = [
+    {
+      name: 'Sarah Johnson',
+      role: 'CEO & Co-Founder',
+      bio: 'Passionate about building products that empower designers and developers to create better digital experiences.',
+    },
+    {
+      name: 'Marcus Chen',
+      role: 'CTO & Co-Founder',
+      bio: 'Full-stack engineer with 10+ years building design systems and developer tools.',
+    },
+    {
+      name: 'Priya Patel',
+      role: 'Head of Design',
+      bio: 'Former lead designer at top tech companies, passionate about accessible and beautiful interfaces.',
+    },
+    {
+      name: 'James Rivera',
+      role: 'Head of Engineering',
+      bio: 'Loves clean code, performance optimization, and mentoring engineers.',
+    },
+    {
+      name: 'Lena Schmidt',
+      role: 'Product Manager',
+      bio: 'Bridges design and engineering to ship products users love.',
+    },
+    {
+      name: 'Noah Williams',
+      role: 'Marketing Lead',
+      bio: 'Data-driven marketer focused on developer communities and content.',
+    },
+  ];
+
+  let { class: className, title = 'Meet our team', description = 'Our diverse team of experts is passionate about creating the best possible product for you.', members = defaultMembers.slice(0, 4) } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl">
+    <div class="mb-12">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Team Section</p>
+      <h2 class="text-2xl sm:text-3xl font-bold mb-4">{title}</h2>
+      <p class="text-muted-foreground max-w-2xl">{description}</p>
+    </div>
+
+    <div class="flex flex-col divide-y">
+      {#each members as member}
+        <div class="flex items-center justify-between gap-4 py-5">
+          <div class="flex items-center gap-4 flex-1">
+            <div class="h-12 w-12 rounded-full bg-muted text-sm font-semibold flex items-center justify-center text-muted-foreground flex-shrink-0">
+              {member.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')}
+            </div>
+
+            <div class="text-left">
+              <h3 class="font-medium text-sm">{member.name}</h3>
+
+              {#if member.role}
+                <p class="text-xs text-muted-foreground">{member.role}</p>
+              {/if}
+
+              {#if member.bio}
+                <p class="mt-1 text-xs text-muted-foreground line-clamp-1">{member.bio}</p>
+              {/if}
+            </div>
+          </div>
+
+          {#if member.twitter || member.linkedin}
+            <div class="flex gap-2 flex-shrink-0">
+              {#if member.twitter}
+                <a href={member.twitter} target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-muted rounded-md transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" class="text-muted-foreground hover:text-foreground">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                  </svg>
+                </a>
+              {/if}
+
+              {#if member.linkedin}
+                <a href={member.linkedin} target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-muted rounded-md transition-colors">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" class="text-muted-foreground hover:text-foreground">
+                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                    <rect x="2" y="9" width="4" height="12" />
+                    <circle cx="4" cy="4" r="2" />
+                  </svg>
+                </a>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/team-section/index.ts

@@ -0,0 +1,13 @@
+export { default as TeamSection01 } from './TeamSection01.svelte';
+export { default as TeamSection02 } from './TeamSection02.svelte';
+export { default as TeamSection03 } from './TeamSection03.svelte';
+export { default as TeamSection04 } from './TeamSection04.svelte';
+
+export interface TeamMember {
+  name: string;
+  role?: string;
+  bio?: string;
+  avatarUrl?: string;
+  twitter?: string;
+  linkedin?: string;
+}