Designs and API Routes

resources/js/components/RecentStories.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <div>
+            <h3 class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu">
+                ފަހުގެ ޙަބަރުތަށް
+            </h3>
+        </div>
+
+        <div class="flex justify-end">
+        <!-- post cards -->
+        <div class="w-full lg:w-2/3">
+            <a
+                v-for="story in recentStories"
+                :key="story.id"
+                class="block w-full lg:flex mb-10 shadow rounded-lg"
+                href="#"
+            >
+               
+                <div
+                    class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
+                >
+                    <div>
+                        <div
+                            class="mt-3 md:mt-0 text-gray-700 font-bold text-2xl mb-2 text-right MvAamu"
+                            style="direction:rtl;"
+                        >
+                        އައްޑޫން މީހަކު ޕޮޒިޓިވްވެއްޖެ
+                        </div>
+
+                        <div class="flex items-center justify-end mt-1 mb-2">
+                            <p
+                                class="font-semibold text-gray-700 text-sm capitalize"
+                                v-text="story.source.name"
+                            >
+                            </p>
+                            <p class="text-gray-600 text-xs ml-1">
+                                &mdash; {{story.published_date | moment("calendar")}}
+                            </p>
+                        </div>
+
+                        <p class="text-gray-700 text-base text-right MvTyper" style="direction:rtl;">
+                          ރާއްޖޭގައި ކޮވިޑްގެ ހާލަތު އިތުރަށް ގޯސްވަމުންދާއިރު ގިނަ ރަށްރަށުން ބަލި މީހުން ދަނީ ފެންނަމުންނެވެ.
+                        </p>
+                    </div>
+                </div>
+
+                 <div
+                    class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
+                    style="background-image: url('https://images-01.avas.mv/post/big_RuM5p2M10OjKIYZf8SrS6aeHb.jpg')"
+                    title="deit is very important"
+                ></div>
+            </a>
+        </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "recent-stories",
+
+    data() {
+        return {
+            recentStories: []
+        };
+    },
+
+    mounted() {
+        axios
+            .get("api/recent")
+            .then(response => {
+                this.recentStories = response.data.data;
+            })
+            .catch(error => {
+                console.log(error);
+            });
+    }
+};
+</script>