Create articles masonry list

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>