Start project headers

frontend-new/src/components/UserAvatar.vue

@@ -1,12 +1,30 @@
 <script setup lang="ts">
-const props = defineProps<{
-  username: string;
-}>();
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    username: string;
+    size?: string;
+  }>(),
+  {
+    size: "md",
+  }
+);
+
+const sizeClass = computed(() => {
+  if (props.size == "xs") return "w-32px h-32px";
+  else if (props.size == "sm") return "w-50px h-50px";
+  else if (props.size == "md") return "w-100px h-100px";
+
+  return "w-200px h-200px";
+});
 </script>
 
 <template>
-  <span
-    >{{ username }}'s<br />
-    avatar</span
-  >
+  <div :class="'bg-gray-100 dark:bg-gray-900 rounded-lg ' + sizeClass">
+    <span
+      >{{ username }}'s<br />
+      avatar</span
+    >
+  </div>
 </template>

frontend-new/src/components/projects/ProjectHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import { Project, User } from "hangar-api";
+import UserAvatar from "~/components/UserAvatar.vue";
+import Button from "~/components/design/Button.vue";
+
+defineProps({
+  user: {
+    type: Object as PropType<User>,
+    required: true,
+  },
+  project: {
+    type: Object as PropType<Project>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <section class="background-header rounded-lg p-4">
+    <div class="flex">
+      <UserAvatar :username="project.namespace.owner"></UserAvatar>
+      <div class="flex-grow mx-4">
+        <p class="text-2xl">
+          <router-link :to="'/' + project.namespace.owner">{{ project.namespace.owner }}</router-link>
+          <span class="text-gray-500 dark:text-gray-400"> / </span>
+          <span class="text-medium">{{ project.name }}</span>
+        </p>
+        <p>{{ project.description }}</p>
+      </div>
+      <div>
+        <Button>Download latest</Button>
+      </div>
+    </div>
+  </section>
+</template>

frontend-new/src/pages/[user]/[project].vue

@@ -7,6 +7,7 @@ import { useProject } from "~/composables/useApiHelper";
 import { useRoute, useRouter } from "vue-router";
 import { handleRequestError } from "~/composables/useErrorHandling";
 import { useErrorRedirect } from "~/composables/useErrorRedirect";
+import ProjectHeader from "~/components/projects/ProjectHeader.vue";
 
 defineProps({
   user: {
@@ -25,6 +26,6 @@ if (!project) {
 </script>
 
 <template>
-  <div>project parent</div>
+  <ProjectHeader :user="user" :project="project"></ProjectHeader>
   <router-view :user="user" :project="project"></router-view>
 </template>