Add profile page.

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
+import HomeView from '../views/HomeView.vue'
+import ProfileView from '../views/ProfileView.vue'
 import StickerView from '../views/StickerView.vue'
 
 const router = createRouter({
@@ -14,6 +15,14 @@ const router = createRouter({
       name: 'home',
       path: '/',
     },
+    {
+      component: ProfileView,
+      meta: {
+        title: 'Profile',
+      },
+      name: 'profile',
+      path: '/:uuid([0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})',
+    },
     {
       component: AboutView,
       meta: {

src/views/ProfileView.vue

@@ -0,0 +1,134 @@
+<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>