radicle-explorer/src/Card.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { Link } from 'svelte-routing';
  import Avatar from '@app/Avatar.svelte';
  import type { Profile } from '@app/profile';
  import type { Config } from '@app/config';
  import { formatName, formatAddress } from '@app/utils';
  import type { Seed } from '@app/base/seeds/Seed';

  export let profile: Profile | {
    address: string;
    avatar?: string;
    name?: string;
  } | null = null;
  export let seed: Seed | null = null;
  export let config: Config;
  export let path: string;
  export let members: string[] = [];

  let numberOfProjects: number | null = null;

  onMount(async () => {
    if (seed) {
      const projects = await seed.getProjects();
      numberOfProjects = projects.length;
    }
  });
</script>

<style>
  .card {
    width: 12rem;
    height: 10.5rem;
    margin-right: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    display: inline-block;
    text-align: center;
    border-radius: 1rem;
  }
  .card::last-child {
    margin-right: 0;
  }
  .card:hover  {
    background: var(--color-foreground-background-lighter);
  }
  .card-avatar {
    margin: 0 auto;
    text-align: center;
    width: 4rem;
    height: 4rem;
  }
  .card-label {
    color: var(--color-foreground-90);
    display: inline-block;
    font-weight: var(--font-weight-medium);
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    padding: 0rem;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  .card-members {
    font-size: 0.875rem;
    color: var(--color-foreground-faded);
  }

  .card.seed {
    width: 14rem;
  }
  .card.seed .card-label {
    max-width: 12rem;
  }
  .card.seed .seed-emoji {
    font-size: 3rem;
  }

  @media (max-width: 720px) {
    .card {
      margin-right: 0;
    }
  }
</style>

<Link to={path}>
  <div class="card" class:seed={!!seed}>
    <div class="card-avatar">
      {#if profile}
        <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
      {:else if seed}
        <span class="seed-emoji">
          {seed.emoji}
        </span>
      {/if}
    </div>
    <div class="card-label">
      {#if profile}
        {#if profile.name}
          {formatName(profile.name, config)}
        {:else}
          {formatAddress(profile.address)}
        {/if}
      {:else if seed}
        {seed.host}
      {/if}
    </div>
    <div class="card-members">
      {#if profile}
        {#if members.length > 0}
          {members.length} member(s)
        {:else}
          {formatAddress(profile.address)}
        {/if}
      {:else if numberOfProjects !== null}
        {#if numberOfProjects > 0}
          {numberOfProjects} project(s)
        {:else}
          No projects
        {/if}
      {/if}
    </div>
  </div>
</Link>