initial

apps/client/components/projects-table.vue

@@ -0,0 +1,162 @@
+<template>
+  <UiPlainTable class="projects-table" :columns="columns" :data="projects">
+    <template #cell(name)="{ row }">
+      <div class="name-cell">
+        <div class="name-cell__initials">
+          {{ getProjectInitials(row.original) }}
+        </div>
+        <div class="name-cell__name">
+          {{ row.original.name }}
+        </div>
+        <div class="name-cell__id">
+          id {{ row.original.id }}
+        </div>
+      </div>
+    </template>
+
+    <template #cell(balance)="{ row }">
+      <MoneyAmount :value="row.original.account.balance" currency="USDT" />
+    </template>
+
+    <template #cell(withdraw)="{ row }">
+      <MoneyAmount value="0" currency="USDT" />
+    </template>
+
+    <template #cell(actions)="{ row }">
+      <UiButton class="mr-16" color="secondary">
+        API
+      </UiButton>
+      <UiButton class="mr-16" color="secondary">
+        Settings
+      </UiButton>
+      <UiButton :href="`/projects/${row.original.id}`">
+        Open
+      </UiButton>
+    </template>
+  </UiPlainTable>
+</template>
+
+<script setup lang="ts">
+import { createColumnHelper } from '@tanstack/vue-table'
+
+interface ProjectListItem {
+  id: number
+  name: string
+}
+
+defineProps({
+  projects: {
+    type: Array,
+    required: true,
+  },
+})
+
+const columnHelper = createColumnHelper<ProjectListItem>()
+
+const columns = [
+  columnHelper.accessor('name', {
+    header: 'Name',
+  }),
+  columnHelper.display({
+    id: 'balance',
+    header: 'Balance',
+  }),
+  columnHelper.display({
+    id: 'withdraw',
+    header: 'In sending',
+  }),
+  columnHelper.display({
+    id: 'actions',
+  }),
+]
+
+function getProjectInitials(project: ProjectListItem) {
+  return project.name.slice(0, 1)
+}
+</script>
+
+<style lang="scss">
+.projects-table {
+  @include txt-i-sb('money-amount-value', true);
+
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+  text-align: left;
+  margin-block: -8px;
+
+  td,
+  th {
+    margin: 0;
+    padding-inline: 16px;
+    background-color: $clr-grey-100;
+
+    &:first-child {
+      border-top-left-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+  }
+
+  th {
+    @include txt-i-m;
+
+    color: $clr-grey-500;
+    padding-block: 16px;
+
+    &.name {
+      padding-left: 64px;
+    }
+  }
+
+  td {
+    padding-block: 24px;
+    height: 95.8px;
+
+    &.actions {
+      background-color: $clr-grey-200;
+      padding-left: 32px;
+      width: 1%;
+      white-space: nowrap;
+    }
+  }
+}
+
+.name-cell {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 32px auto;
+  gap: 4px 16px;
+
+  &__initials {
+    @include font(20px, 500, 32px);
+
+    background-color: $clr-grey-400;
+    height: 32px;
+    text-align: center;
+    border-radius: 6px;
+    color: $clr-white;
+    text-transform: uppercase;
+    grid-column: 1;
+    grid-row: span 2;
+  }
+
+  &__name {
+    @include txt-i-sb;
+
+    grid-column: 2;
+    color: $clr-black;
+  }
+
+  &__id {
+    @include txt-s-m;
+
+    grid-column: 2;
+    color: $clr-grey-500;
+  }
+}
+</style>