activist/src/views/ProfileView.vue

<script setup lang="ts">
import {computed, ref} from 'vue';
import Avatar from 'primevue/avatar';
import Button from 'primevue/button';
import Card from 'primevue/card';
import Chip from 'primevue/chip';
import MeterGroup from 'primevue/metergroup';
import Panel from 'primevue/panel';
import Sticker from "@/components/Sticker.vue";
import Timeline from 'primevue/timeline';
import {useRoute} from 'vue-router';
import { useUserStore } from "@/stores/userStore";

const userStore = useUserStore();

const meterValue = ref([
  { label: 'Apps', color: '#34d399', value: 20 },
  { label: 'Messages', color: '#fbbf24', value: 10 },
  { label: 'Media', color: '#60a5fa', value: 25 },
  { label: 'System', color: '#c084fc', value: 45 }
]);

const events = [{
  color: '#34d399',
  date: "2024-01-01",
  description: "outside white house",
  icon: 'pi pi-megaphone',
  title: "protested",
},{
  color: '#60a5fa',
  date: "2024-01-02",
  description: "Mark Warner",
  icon: 'pi pi-envelope',
  title: "wrote senator",
},{
  color: '#c084fc',
  date: "2024-01-02",
  description: "Working Families Party",
  icon: 'pi pi-graduation-cap',
  title: "attended training",
},];
</script>

<template>
  <div class="profilePage">
    <Panel>
      <div class="flex flex-row content-end">
        <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
        <div>
          {{ userStore.user.name }}
        </div>
      </div>
    </Panel>
    <Panel header="My Stickers">
      <div class="stickers">
        <div class="stickerWrapper" v-for="sticker in userStore.user.stickers">
          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker.uuid }}">
            <Sticker v-bind="sticker" />
          </RouterLink>
        </div>
        <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
      </div>
    </Panel>
    <Panel header="Metrics">
      <MeterGroup :value="meterValue" />
    </Panel>
    <div class="grid sm:grid-cols-2 gap-2">
      <div id=1 class="flex">
        <Panel header="Activities">
          <Timeline
            align="left"
            class="h-128 overflow-hidden"
            :pt="{ eventOpposite: { class: 'hidden' } }"
            :value="events">
            <template #marker="slotProps">
            <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
              <i :class="slotProps.item.icon"></i>
            </span>
            </template>
            <template #content="slotProps">
              <Card class="mt-4">
                <template #header>
                  <img v-if="slotProps.item.image" :src="`/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                </template>
                <template #title>
                  {{ slotProps.item.title }} <span class="text-gray-400 text-sm">{{ slotProps.item.date }}</span>
                </template>
                <template #content>
                  <p>
                    {{ slotProps.item.description }}
                  </p>
                  <Button label="Read more" text></Button>
                </template>
              </Card>
            </template>
          </Timeline>
        </Panel>
      </div>
      <div id=2 class="flex items-center justify-center">
        <Panel header="Tags">
          <Chip label="labor" icon="pi pi-wrench" />
          <Chip label="feminism" icon="pi pi-venus" />
          <Chip label="environmental" icon="pi pi-globe" />
          <Chip label="protest" icon="pi pi-megaphone" />
          <Chip label="tech" icon="pi pi-save" />
          <Chip label="electoral" icon="pi pi-box" />
          <Chip label="mapper" icon="pi pi-map" />
          <Chip label="anti-capitalist" icon="pi pi-wallet" />
        </Panel>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profilePage {
  @apply p-2 gap-2;
  display: flex;
  flex-direction: column;
}
.stickers {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stickerWrapper {
  background-color: #F2F2F2;
  padding: 10px;
  width: 300px;
}
</style>