src/components/DiffStatBadge.svelte — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

.. DropdownList ActivityDiagram.svelte Badge.svelte Button.svelte Clipboard.svelte Command.svelte Comment.svelte CompactCommitAuthorship.svelte DiffStatBadge.svelte DropdownList.svelte ErrorMessage.svelte ExpandButton.svelte ExternalLink.svelte File.svelte FilePath.svelte Header.svelte HoverPopover.svelte Icon.svelte IconButton.svelte IconLarge.svelte Id.svelte JobCob.svelte KeyHint.svelte Layout.svelte Link.svelte List.svelte Loading.svelte Logo.svelte Markdown.svelte Modal.svelte NodeId.svelte Observer.svelte Placeholder.svelte Popover.svelte Radio.svelte Reactions.svelte RepoAvatar.svelte RepoCard.svelte RepoCard.ts ScopePolicyExplainer.svelte TextInput.svelte Thread.svelte UserAvatar.svelte

<script lang="ts">
  interface Props {
    insertions: number;
    deletions: number;
    hoverable?: boolean;
  }

  const { insertions, deletions, hoverable }: Props = $props();
</script>

<style>
  .badge {
    display: flex;
    font: var(--txt-body-s-regular);
    height: var(--button-tiny-height);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius-sm);
  }
  .badge:hover {
    background-color: var(--color-surface-alpha-mid);
  }
  .positive {
    display: flex;
    padding: 0 4px;
    align-items: center;
    color: var(--color-text-open);
  }
  .negative {
    display: flex;
    padding: 0 4px;
    align-items: center;
    color: var(--color-feedback-error-text);
  }
</style>

<div class="badge" class:hoverable>
  <div class="positive">
    +{insertions}
  </div>
  <div class="negative">
    -{deletions}
  </div>
</div>