@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/network/UserCardsNFTPage.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Input } from '../ui/input/index.js';
+  import { Search, ExternalLink, Check, Plus } from '@lucide/svelte';
+
+  interface NFTUser {
+    id: string;
+    name: string;
+    username: string;
+    avatar?: string;
+    bio: string;
+    collectionCount: number;
+    floorPrice: string;
+    volume: string;
+    verified: boolean;
+    tags: string[];
+  }
+
+  let searchQuery = $state('');
+
+  const users: NFTUser[] = [
+    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', bio: 'Digital art collection featuring generative abstracts', collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true, tags: ['Art', 'Generative'] },
+    { id: '2', name: 'PixelPunk Collective', username: '@pixelpunk', bio: 'On-chain pixel art characters with unique traits', collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true, tags: ['PFP', 'Pixel'] },
+    { id: '3', name: 'MetaVerse Builders', username: '@metabuild', bio: '3D architectural models for virtual worlds', collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false, tags: ['3D', 'Virtual'] },
+    { id: '4', name: 'SoundWave NFT', username: '@soundwave', bio: 'Music-backed NFTs with on-chain audio', collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true, tags: ['Music', 'Audio'] },
+    { id: '5', name: 'GameAssets DAO', username: '@gameassets', bio: 'In-game items and collectibles for Web3 gaming', collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true, tags: ['Gaming', 'Items'] },
+    { id: '6', name: 'PhotoVerse', username: '@photoverse', bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
+  ];
+
+  const filtered = $derived(
+    searchQuery
+      ? users.filter(u => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.username.toLowerCase().includes(searchQuery.toLowerCase()) || u.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())))
+      : users
+  );
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+
+  let connectedIds = $state<string[]>([]);
+
+  function toggleConnect(id: string) {
+    connectedIds = connectedIds.includes(id)
+      ? connectedIds.filter(connectedId => connectedId !== id)
+      : [...connectedIds, id];
+  }
+
+  function isConnected(id: string): boolean {
+    return connectedIds.includes(id);
+  }
+</script>
+
+<div class="space-y-6" data-svadmin-content-page="network">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('network.userCards')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('network.userCardsDescription')}</p>
+  </div>
+
+  <div class="relative">
+    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+    <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+  </div>
+
+  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    {#each filtered as user (user.id)}
+      <Card.Card class="overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
+        <div class="h-20 bg-gradient-to-r from-violet-500/20 via-purple-500/15 to-fuchsia-500/20 relative">
+          <div class="absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 16px 16px;"></div>
+        </div>
+        <Card.CardContent class="relative px-4 pb-4">
+          <div class="-mt-8 mb-2 flex items-end gap-3">
+            <div class="ring-3 ring-card rounded-xl overflow-hidden shrink-0">
+              <div class="flex h-14 w-14 items-center justify-center bg-primary/10 text-primary font-bold">
+                {initials(user.name)}
+              </div>
+            </div>
+            <div class="flex-1 min-w-0 pb-0.5">
+              <div class="flex items-center gap-1.5">
+                <h4 class="text-sm font-semibold text-foreground truncate">{user.name}</h4>
+                {#if user.verified}
+                  <Check class="h-3.5 w-3.5 text-blue-500" />
+                {/if}
+              </div>
+              <p class="text-xs text-muted-foreground">{user.username}</p>
+            </div>
+          </div>
+
+          <p class="text-xs text-muted-foreground line-clamp-2 mb-3">{user.bio}</p>
+
+          <div class="flex flex-wrap gap-1 mb-3">
+            {#each user.tags as tag (tag)}
+              <Badge variant="outline" class="text-[10px]">{tag}</Badge>
+            {/each}
+          </div>
+
+          <!-- NFT stats -->
+          <div class="grid grid-cols-3 gap-2 border-t pt-3">
+            <div class="text-center">
+              <div class="text-sm font-semibold text-foreground">{user.collectionCount}</div>
+              <div class="text-[10px] text-muted-foreground">{t('network.nftCollection')}</div>
+            </div>
+            <div class="text-center">
+              <div class="text-sm font-semibold text-foreground">{user.floorPrice}</div>
+              <div class="text-[10px] text-muted-foreground">{t('network.floorPrice')}</div>
+            </div>
+            <div class="text-center">
+              <div class="text-xs font-semibold text-foreground">{user.volume}</div>
+              <div class="text-[10px] text-muted-foreground">{t('network.volume')}</div>
+            </div>
+          </div>
+
+          <div class="mt-3 flex gap-2">
+            <Button
+              size="sm"
+              variant={isConnected(user.id) ? 'outline' : 'default'}
+              class="flex-1"
+              onclick={() => toggleConnect(user.id)}
+            >
+              {#if isConnected(user.id)}
+                <Check class="h-3.5 w-3.5 mr-1" />{t('network.connected')}
+              {:else}
+                <Plus class="h-3.5 w-3.5 mr-1" />{t('network.connect')}
+              {/if}
+            </Button>
+            <Button size="sm" variant="ghost">
+              <ExternalLink class="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    {/each}
+  </div>
+</div>

package/dist/components/network/UserCardsNFTPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const UserCardsNFTPage: import("svelte").Component<Record<string, never>, {}, "">;
+type UserCardsNFTPage = ReturnType<typeof UserCardsNFTPage>;
+export default UserCardsNFTPage;

package/dist/components/profile/ActivityTimeline.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { MessageSquare, Plus, UserPlus, Star } from '@lucide/svelte';
+  import type { Component } from 'svelte';
+
+  interface ActivityItem {
+    id: string;
+    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
+    user: string;
+    avatar?: string;
+    content?: string;
+    target?: string;
+    timestamp: string;
+  }
+
+  interface Props {
+    activities?: ActivityItem[];
+  }
+
+  let { activities = [] }: Props = $props();
+
+  const typeConfig: Record<string, { icon: Component; color: string; action: string }> = {
+    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: t('publicProfile.activityPosted') },
+    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: t('publicProfile.activityCommented') },
+    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: t('publicProfile.activityJoined') },
+    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: t('publicProfile.activityCreated') },
+    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: t('publicProfile.activityCreated') },
+  };
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-lg font-semibold text-foreground">{t('publicProfile.activity')}</h3>
+
+  {#if activities.length === 0}
+    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
+      <p class="text-sm text-muted-foreground">{t('publicProfile.noActivity')}</p>
+    </div>
+  {:else}
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="p-0">
+        <div class="divide-y">
+          {#each activities as activity (activity.id)}
+            {@const config = typeConfig[activity.type] ?? typeConfig['posted']}
+            <div class="flex items-start gap-3 p-4">
+              <div class="shrink-0 mt-0.5">
+                {#if activity.avatar}
+                  <Avatar class="h-8 w-8">
+                    <img src={activity.avatar} alt={activity.user} />
+                  </Avatar>
+                {:else}
+                  <div class="flex h-8 w-8 items-center justify-center rounded-full {config.color}">
+                    <config.icon class="h-4 w-4" />
+                  </div>
+                {/if}
+              </div>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm">
+                  <strong class="text-foreground">{activity.user}</strong>
+                  <span class="text-muted-foreground"> {config.action} </span>
+                  {#if activity.target}
+                    <strong class="text-foreground">{activity.target}</strong>
+                  {/if}
+                </p>
+                {#if activity.content}
+                  <p class="mt-1 text-sm text-muted-foreground line-clamp-2">{activity.content}</p>
+                {/if}
+                <p class="mt-1 text-xs text-muted-foreground/60">{activity.timestamp}</p>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+  {/if}
+</div>

package/dist/components/profile/ActivityTimeline.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+interface ActivityItem {
+    id: string;
+    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
+    user: string;
+    avatar?: string;
+    content?: string;
+    target?: string;
+    timestamp: string;
+}
+interface Props {
+    activities?: ActivityItem[];
+}
+declare const ActivityTimeline: Component<Props, {}, "">;
+type ActivityTimeline = ReturnType<typeof ActivityTimeline>;
+export default ActivityTimeline;

package/dist/components/profile/ProfileCard.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Card from '../ui/card/index.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { MapPin, Link, Calendar, Users, Star, Trophy, Building2, Gamepad2 } from '@lucide/svelte';
+
+  interface ProfileStats {
+    label: string;
+    value: string | number;
+  }
+
+  interface Props {
+    variant?: 'default' | 'company' | 'gamer';
+    name: string;
+    tagline?: string;
+    avatar?: string;
+    coverImage?: string;
+    location?: string;
+    website?: string;
+    joinedDate?: string;
+    stats?: ProfileStats[];
+    tags?: string[];
+    followers?: number;
+    following?: number;
+    // Company-specific
+    industry?: string;
+    employees?: number;
+    founded?: string;
+    // Gamer-specific
+    gamerTag?: string;
+    level?: number;
+    rank?: string;
+  }
+
+  let {
+    variant = 'default',
+    name,
+    tagline = '',
+    avatar,
+    coverImage,
+    location,
+    website,
+    joinedDate,
+    stats = [],
+    tags = [],
+    followers = 0,
+    following = 0,
+    industry,
+    employees,
+    founded,
+    gamerTag,
+    level,
+    rank,
+  }: Props = $props();
+
+  const initials = $derived(name ? name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) : '?');
+  const statsGridClass = $derived(stats.length > 3 ? 'grid-cols-4' : stats.length === 3 ? 'grid-cols-3' : stats.length === 2 ? 'grid-cols-2' : 'grid-cols-1');
+
+  let isConnected = $state(false);
+
+  function toggleConnect() {
+    isConnected = !isConnected;
+  }
+</script>
+
+<Card.Card class="overflow-hidden border-border/60">
+  {#if coverImage}
+    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+      <img src={coverImage} alt="" class="h-full w-full object-cover" />
+    </div>
+  {:else}
+    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+      <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 20px 20px;"></div>
+    </div>
+  {/if}
+
+  <Card.CardContent class="relative px-5 pb-5">
+    <div class="-mt-10 mb-3 flex items-end gap-4">
+      <div class="ring-4 ring-card rounded-xl overflow-hidden shrink-0">
+        {#if avatar}
+          <Avatar class="h-20 w-20">
+            <img src={avatar} alt={name} />
+          </Avatar>
+        {:else}
+          <div class="flex h-20 w-20 items-center justify-center rounded-xl bg-primary/10 text-primary text-2xl font-bold">
+            {initials}
+          </div>
+        {/if}
+      </div>
+      <div class="flex-1 min-w-0 pb-1">
+        <div class="flex items-center gap-2">
+          <h3 class="text-lg font-semibold text-foreground truncate">{name}</h3>
+          {#if variant === 'company'}
+            <Badge variant="secondary" class="shrink-0"><Building2 class="h-3 w-3 mr-1" />{t('profile.company')}</Badge>
+          {:else if variant === 'gamer'}
+            <Badge variant="secondary" class="shrink-0"><Gamepad2 class="h-3 w-3 mr-1" />{t('profile.gamer')}</Badge>
+          {/if}
+        </div>
+        {#if tagline}
+          <p class="text-sm text-muted-foreground truncate">{tagline}</p>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Variant-specific info -->
+    {#if variant === 'company' && (industry || employees || founded)}
+      <div class="mb-3 grid grid-cols-2 gap-2 text-sm">
+        {#if industry}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Building2 class="h-3.5 w-3.5" />
+            <span>{industry}</span>
+          </div>
+        {/if}
+        {#if employees}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Users class="h-3.5 w-3.5" />
+            <span>{employees} {t('profile.employees')}</span>
+          </div>
+        {/if}
+        {#if founded}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Calendar class="h-3.5 w-3.5" />
+            <span>{t('profile.founded')} {founded}</span>
+          </div>
+        {/if}
+        {#if website}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Link class="h-3.5 w-3.5" />
+            <span class="truncate">{website}</span>
+          </div>
+        {/if}
+      </div>
+    {:else if variant === 'gamer' && (gamerTag || level || rank)}
+      <div class="mb-3 grid grid-cols-2 gap-2 text-sm">
+        {#if gamerTag}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Gamepad2 class="h-3.5 w-3.5" />
+            <span>{gamerTag}</span>
+          </div>
+        {/if}
+        {#if level}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Star class="h-3.5 w-3.5" />
+            <span>{t('profile.level')} {level}</span>
+          </div>
+        {/if}
+        {#if rank}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Trophy class="h-3.5 w-3.5" />
+            <span>{rank}</span>
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- Default profile info -->
+      <div class="mb-3 flex flex-wrap gap-3 text-sm text-muted-foreground">
+        {#if location}
+          <div class="flex items-center gap-1.5"><MapPin class="h-3.5 w-3.5" /><span>{location}</span></div>
+        {/if}
+        {#if website}
+          <div class="flex items-center gap-1.5"><Link class="h-3.5 w-3.5" /><span class="truncate">{website}</span></div>
+        {/if}
+        {#if joinedDate}
+          <div class="flex items-center gap-1.5"><Calendar class="h-3.5 w-3.5" /><span>{t('publicProfile.joinedDate', { date: joinedDate })}</span></div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Tags -->
+    {#if tags.length > 0}
+      <div class="mb-3 flex flex-wrap gap-1.5">
+        {#each tags as tag (tag)}
+          <Badge variant="outline" class="text-xs">{tag}</Badge>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Stats -->
+    {#if stats.length > 0}
+      <div class="mb-3 grid {statsGridClass} gap-3 border-t pt-3">
+        {#each stats as stat (stat.label)}
+          <div class="text-center">
+            <div class="text-lg font-semibold text-foreground">{stat.value}</div>
+            <div class="text-xs text-muted-foreground">{stat.label}</div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Followers / Following -->
+    {#if followers > 0 || following > 0}
+      <div class="flex gap-4 text-sm border-t pt-3">
+        {#if followers > 0}
+          <span><strong class="text-foreground">{followers}</strong> <span class="text-muted-foreground">{t('publicProfile.followers')}</span></span>
+        {/if}
+        {#if following > 0}
+          <span><strong class="text-foreground">{following}</strong> <span class="text-muted-foreground">{t('publicProfile.following')}</span></span>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Actions -->
+    <div class="mt-3 flex gap-2">
+      <Button
+        size="sm"
+        variant={isConnected ? 'outline' : 'default'}
+        onclick={toggleConnect}
+      >
+        {isConnected ? t('network.connected') : t('network.connect')}
+      </Button>
+      <Button size="sm" variant="outline">{t('publicProfile.sendMessage')}</Button>
+    </div>
+  </Card.CardContent>
+</Card.Card>

package/dist/components/profile/ProfileCard.svelte.d.ts

@@ -0,0 +1,27 @@
+interface ProfileStats {
+    label: string;
+    value: string | number;
+}
+interface Props {
+    variant?: 'default' | 'company' | 'gamer';
+    name: string;
+    tagline?: string;
+    avatar?: string;
+    coverImage?: string;
+    location?: string;
+    website?: string;
+    joinedDate?: string;
+    stats?: ProfileStats[];
+    tags?: string[];
+    followers?: number;
+    following?: number;
+    industry?: string;
+    employees?: number;
+    founded?: string;
+    gamerTag?: string;
+    level?: number;
+    rank?: string;
+}
+declare const ProfileCard: import("svelte").Component<Props, {}, "">;
+type ProfileCard = ReturnType<typeof ProfileCard>;
+export default ProfileCard;

package/dist/components/profile/ProjectsGrid.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Users, CheckCircle2, ArrowRight } from '@lucide/svelte';
+
+  interface Project {
+    id: string;
+    name: string;
+    description: string;
+    members: number;
+    tasks: number;
+    status: 'active' | 'completed' | 'on-hold';
+    tags?: string[];
+    image?: string;
+  }
+
+  interface Props {
+    columns?: 2 | 3;
+    projects?: Project[];
+  }
+
+  let {
+    columns = 2,
+    projects = [],
+  }: Props = $props();
+
+  const statusConfig = {
+    'active': { color: 'bg-green-500/10 text-green-600', label: 'Active' },
+    'completed': { color: 'bg-blue-500/10 text-blue-600', label: 'Completed' },
+    'on-hold': { color: 'bg-amber-500/10 text-amber-600', label: 'On Hold' },
+  };
+
+  const gridCols = $derived(columns === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-2');
+</script>
+
+<div class="space-y-4">
+  <div class="flex items-center justify-between">
+    <h3 class="text-lg font-semibold text-foreground">
+      {columns === 2 ? t('publicProfile.projects2Col') : t('publicProfile.projects3Col')}
+    </h3>
+    <Badge variant="secondary">{projects.length}</Badge>
+  </div>
+
+  {#if projects.length === 0}
+    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
+      <p class="text-sm text-muted-foreground">{t('publicProfile.noProjects')}</p>
+    </div>
+  {:else}
+    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 {gridCols}">
+      {#each projects as project (project.id)}
+        <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
+          {#if project.image}
+            <div class="h-32 overflow-hidden">
+              <img src={project.image} alt={project.name} class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300" />
+            </div>
+          {/if}
+          <Card.CardContent class="p-4 space-y-3">
+            <div class="flex items-start justify-between gap-2">
+              <h4 class="font-semibold text-foreground">{project.name}</h4>
+              <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold {statusConfig[project.status].color}">
+                {statusConfig[project.status].label}
+              </span>
+            </div>
+
+            <p class="text-sm text-muted-foreground line-clamp-2">{project.description}</p>
+
+            {#if project.tags && project.tags.length > 0}
+              <div class="flex flex-wrap gap-1">
+                {#each project.tags as tag (tag)}
+                  <Badge variant="outline" class="text-[10px]">{tag}</Badge>
+                {/each}
+              </div>
+            {/if}
+
+            <div class="flex items-center justify-between pt-2 border-t">
+              <div class="flex items-center gap-3 text-xs text-muted-foreground">
+                <span class="flex items-center gap-1"><Users class="h-3 w-3" />{t('publicProfile.projectMembers', { count: project.members })}</span>
+                <span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{t('publicProfile.projectTasks', { count: project.tasks })}</span>
+              </div>
+              <Button variant="ghost" size="icon-sm">
+                <ArrowRight class="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </Card.CardContent>
+        </Card.Card>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/profile/ProjectsGrid.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Project {
+    id: string;
+    name: string;
+    description: string;
+    members: number;
+    tasks: number;
+    status: 'active' | 'completed' | 'on-hold';
+    tags?: string[];
+    image?: string;
+}
+interface Props {
+    columns?: 2 | 3;
+    projects?: Project[];
+}
+declare const ProjectsGrid: import("svelte").Component<Props, {}, "">;
+type ProjectsGrid = ReturnType<typeof ProjectsGrid>;
+export default ProjectsGrid;