A Miiverse-themed Bluesky client
1.1 kB
52 lines
1<script setup lang="ts">
2import type { AppBskyFeedDefs } from '@atproto/api';
3
4defineProps<{
5 record: AppBskyFeedDefs.GeneratorView
6}>()
7</script>
8
9<template>
10 <NuxtLink class="post-record-generator card" :to="`/users/${record.creator.handle}/feeds/${record.uri.split('/').pop()}`">
11 <div class="generator-avatar">
12 <FeedAvatar
13 :uri="record.avatar"
14 :display-name="record.creator.displayName"
15 size="lg"
16 />
17 </div>
18 <div class="generator-infos">
19 <div class="generator-name">
20 {{ record.displayName }}
21 </div>
22 <div class="generator-author">
23 Feed by @{{ record.creator.handle }}
24 </div>
25 </div>
26 </NuxtLink>
27</template>
28
29<style lang="scss" scoped>
30.post-record-generator {
31 display: flex;
32 padding: 0.5rem;
33 gap: 10px;
34 align-items: center;
35
36 .generator-infos {
37 display: flex;
38 flex-direction: column;
39 gap: 0.25rem;
40
41 .generator-name {
42 font-size: 1rem;
43 font-weight: bold;
44 }
45
46 .generator-author {
47 font-size: 0.75rem;
48 color: #666;
49 }
50 }
51}
52</style>