refactor

1 files changed, 39 insertions, 0 deletions

diff --git a/packages/frontend/src/components/MkClipPreview.vue b/packages/frontend/src/components/MkClipPreview.vue
new file mode 100644
index 0000000000..c5fb718782
--- /dev/null
+++ b/packages/frontend/src/components/MkClipPreview.vue
@@ -0,0 +1,39 @@
+<template>
+<div :class="$style.root" class="_panel">
+	<b>{{ clip.name }}</b>
+	<div v-if="clip.description" :class="$style.description">{{ clip.description }}</div>
+	<div v-if="clip.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="clip.lastClippedAt" mode="detail"/></div>
+	<div :class="$style.user">
+		<MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n';
+
+defineProps<{
+	clip: any;
+}>();
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+	padding: 16px;
+}
+
+.description {
+	padding: 8px 0;
+}
+
+.user {
+	padding-top: 16px;
+	border-top: solid 0.5px var(--divider);
+}
+
+.userAvatar {
+	width: 32px;
+	height: 32px;
+}
+</style>