From 1c50089734620e6b4b3f91bca9139a5ddf3db639 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Sun, 2 Jan 2022 19:09:03 +0000
Subject: [PATCH] Create ProfileListItem component

---
 src/components/ProfileListItem.vue | 48 ++++++++++++++++++++++++++++++
 src/views/SearchResultList.vue     | 31 ++-----------------
 2 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 src/components/ProfileListItem.vue

diff --git a/src/components/ProfileListItem.vue b/src/components/ProfileListItem.vue
new file mode 100644
index 0000000..dc2b5a6
--- /dev/null
+++ b/src/components/ProfileListItem.vue
@@ -0,0 +1,48 @@
+<template>
+  <router-link class="profile" :to="{ name: 'profile', params: { profileId: profile.id }}">
+    <avatar :profile="profile"></avatar>
+    <div class="name">
+      <div class="display-name">{{ profile.display_name || profile.username }}</div>
+      <div class="username">@{{ profile.acct }}</div>
+    </div>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Profile } from "@/api/users"
+import Avatar from "@/components/Avatar.vue"
+
+const props = defineProps<{
+  profile: Profile,
+}>()
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.profile {
+  align-items: center;
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  display: flex;
+  flex-direction: row;
+  padding: $block-inner-padding;
+
+  .avatar {
+    height: $avatar-size;
+    margin-right: $block-inner-padding;
+    width: $avatar-size;
+  }
+
+  .display-name {
+    color: $text-color;
+  }
+
+  .username {
+    color: $secondary-text-color;
+  }
+}
+</style>
diff --git a/src/views/SearchResultList.vue b/src/views/SearchResultList.vue
index 33a434e..0216893 100644
--- a/src/views/SearchResultList.vue
+++ b/src/views/SearchResultList.vue
@@ -10,13 +10,7 @@
       </div>
       <div v-if="!isLoading" class="search-result-list">
         <div class="search-result" v-for="profile in profiles" :key="profile.id">
-          <router-link class="profile" :to="{ name: 'profile', params: { profileId: profile.id }}">
-            <avatar :profile="profile"></avatar>
-            <div class="name">
-              <div class="display-name">{{ profile.display_name || profile.username }}</div>
-              <div class="username">@{{ profile.acct }}</div>
-            </div>
-          </router-link>
+          <profile-list-item :profile="profile"></profile-list-item>
         </div>
         <post :post="post" v-for="post in posts" :key="post.id"></post>
       </div>
@@ -33,6 +27,7 @@ import { Profile } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import Loader from "@/components/Loader.vue"
 import PostComponent from "@/components/Post.vue"
+import ProfileListItem from "@/components/ProfileListItem.vue"
 import Sidebar from "@/components/Sidebar.vue"
 import { useCurrentUser } from "@/store/user"
 
@@ -41,6 +36,7 @@ import { useCurrentUser } from "@/store/user"
     Avatar,
     Loader,
     Post: PostComponent,
+    ProfileListItem,
     Sidebar,
   },
 })
@@ -105,30 +101,9 @@ export default class SearchResultList extends Vue {
 
 .search-result {
   border-bottom: 1px solid $separator-color;
-  padding: $block-inner-padding;
 
   &:last-child {
     border-bottom: none;
   }
-
-  .profile {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-
-    .avatar {
-      height: $avatar-size;
-      margin-right: $block-inner-padding;
-      width: $avatar-size;
-    }
-
-    .display-name {
-      color: $text-color;
-    }
-
-    .username {
-      color: $secondary-text-color;
-    }
-  }
 }
 </style>