From 633631c285909329a49e850242c8af3656b1fab0 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 2 Feb 2025 21:18:49 +0330
Subject: [PATCH] Create articles masonry list

---
 frontend/components/articles/ArticlesList.vue | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 frontend/components/articles/ArticlesList.vue

diff --git a/frontend/components/articles/ArticlesList.vue b/frontend/components/articles/ArticlesList.vue
new file mode 100644
index 0000000..4413d94
--- /dev/null
+++ b/frontend/components/articles/ArticlesList.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+
+// import
+
+import Masonry from "masonry-layout";
+
+// type
+
+type Props = {
+    articles: Article[],
+}
+
+// props
+
+const props = defineProps<Props>();
+const { articles } = toRefs(props);
+
+// state
+
+onMounted(() => {
+    new Masonry(".masonry-articles-container", {
+        itemSelector: ".grid-item",
+        columnWidth: ".grid-sizer",
+        percentPosition: true,
+        gutter: ".gutter-sizer"
+    });
+});
+
+</script>
+
+<template>
+    <div class="masonry-articles-container w-full">
+
+        <div class="grid-sizer"></div>
+        <div class="gutter-sizer"></div>
+
+        <BlogPost
+            v-for="article in articles"
+            :key="article.id"
+            class="grid-item"
+            :image="article.cover_image"
+            :description="article.summery"
+            :title="article.title"
+            :comments="2"
+            :id="article.id"
+            :date="article.created_at"
+            tag="تگ ندارد"
+        />
+
+    </div>
+</template>
+
+<style>
+.grid-sizer,
+.grid-item {
+    margin-bottom: 24px;
+    width: 48%;
+}
+
+.gutter-sizer {
+    width: 4%;
+}
+</style>
\ No newline at end of file