79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
<script setup>
|
|
import Card from '@/components/cards/Card.vue';
|
|
import { useP2postStore } from '../stores/p2postStore';
|
|
import InputComboBox from '@/components/inputs/InputComboBox.vue';
|
|
import { ClockIcon, FunnelIcon, HashtagIcon } from '@heroicons/vue/24/solid';
|
|
|
|
const p2postStore = useP2postStore()
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="bg-black border-yellow-400/20 p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-yellow-400 flex items-center">
|
|
<HashtagIcon class="mr-2 h-5 w-5" />
|
|
Feed
|
|
</h2>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<FunnelIcon class="text-gray-400 h-5 w-5" />
|
|
<InputComboBox></InputComboBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div key={post.id} class="bg-black border border-yellow-400/20 rounded-lg p-4">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center space-x-3">
|
|
<!-- <img src={post.photo || "/placeholder.svg"} alt="" class="w-12 h-12 rounded-full" /> -->
|
|
<div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-white font-semibold">{post.nickname}</span>
|
|
<div class="flex items-center space-x-1">
|
|
<Shield size={14} class="text-yellow-400" />
|
|
<span class="text-yellow-400 text-sm">PoW: {post.powDifficulty}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 font-mono">{post.userPublicKey}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-1 text-gray-400 text-sm">
|
|
<ClockIcon class="h-4 w-4"/>
|
|
<span>{new Date(post.postedAt).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<p class="text-white leading-relaxed">{post.content}</p>
|
|
</div>
|
|
|
|
|
|
<div class="mb-3">
|
|
FILES
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
<span key={network} class="bg-yellow-400 text-black text-sm px-2 py-1 rounded-full">
|
|
{network}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<!-- <div v-for="post in p2postStore.posts.value" :key="post.hash" class="bg-gray-800 p-4 rounded-xl shadow mb-4">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<img :src="post.author.avatar" class="w-8 h-8 rounded-full" alt="Avatar" />
|
|
<div>
|
|
<p class="text-sm font-semibold">{{ post.author.nickname }}</p>
|
|
<p class="text-xs text-gray-400">{{ formatTimestamp(post.timestamp) }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-200 whitespace-pre-wrap">{{ post.content }}</p>
|
|
<div v-for="media in post.media">
|
|
<img v-if="media.type === 'external'" :src="media.url" class="mt-2 rounded max-h-60" alt="Media" />
|
|
<img v-if="media.type === 'local'" :src="media.file_path" class="mt-2 rounded max-h-60" alt="Media" />
|
|
</div>
|
|
</div> -->
|
|
</template> |