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';

const route = useRoute();

const uuid = ref('uuid')
uuid.value = route.params.uuid;

const first = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[0], parts[1], parts[2]].join('-');
})
const second = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[3], parts[4]].join('-');
})

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>
          <div class="font-mono text-sn tracking-wider col">
            {{ first }}
          </div>
          <div class="font-mono text-sn tracking-wider col">
            {{ second }}
          </div>
        </div>
      </div>
    </Panel>
    <Panel class="bg-white" header="Stickers">
      <Button as="router-link" to="/sticker">New sticker</Button>
      <div id="StickerWrapper">
        <Sticker color="#000088" layout="layout1" message1="I support M4A" />
      </div>
    </Panel>
    <Panel header="Metrics">
      <MeterGroup :value="meterValue" />
    </Panel>
    <div class="grid sm:grid-cols-2">
      <div 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 class="flex items-center justify-center">
        <Panel class="m-4" 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>
#StickerWrapper {
  width: 300px;
}
.profilePage > div {
  @apply m-4;
}
</style>