From d1ece11bc8f7ae29e54ee749303e4871eacb1d7f Mon Sep 17 00:00:00 2001
From: MD <1917406+mdcfe@users.noreply.github.com>
Date: Mon, 21 Mar 2022 13:18:17 +0000
Subject: [PATCH] Start project headers

---
 frontend-new/src/components/UserAvatar.vue    | 32 +++++++++++++----
 .../src/components/projects/ProjectHeader.vue | 36 +++++++++++++++++++
 frontend-new/src/pages/[user]/[project].vue   |  3 +-
 3 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 frontend-new/src/components/projects/ProjectHeader.vue

diff --git a/frontend-new/src/components/UserAvatar.vue b/frontend-new/src/components/UserAvatar.vue
index f8bf2a7d0..a09ba732f 100644
--- a/frontend-new/src/components/UserAvatar.vue
+++ b/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>
diff --git a/frontend-new/src/components/projects/ProjectHeader.vue b/frontend-new/src/components/projects/ProjectHeader.vue
new file mode 100644
index 000000000..a9c770833
--- /dev/null
+++ b/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>
diff --git a/frontend-new/src/pages/[user]/[project].vue b/frontend-new/src/pages/[user]/[project].vue
index 32f1d4609..31ebef353 100644
--- a/frontend-new/src/pages/[user]/[project].vue
+++ b/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>