dwd-projects/barta-india.in
1
0
Fork 0
generated from dwd/boilarplate-astro-tailwind
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change

Browse Source
This commit is contained in:
dev sp
2024-02-19 11:58:02 +00:00
parent 2a3c99ace9
commit fdf02a8271
48 changed files with 3410 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/BNCategory.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div>
<section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div>
<a class="flex flex-col" :href="`/bn/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2>
</a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/bn/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.in_brief }}</h2>
</a>
<div class="flex flex-row place-content-between place-items-center">
<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
<a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/bn/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/bn/${item.slug}&text=%20${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/bn/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/${item.slug}&text=${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> -->
</div>
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/bn/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
openDialog(item) {
item.dialogOpen = true;
window.addEventListener('keydown', this.handleKeyDown);
},
closeDialog(item) {
item.dialogOpen = false;
window.removeEventListener('keydown', this.handleKeyDown);
},
handleKeyDown(event) {
if (event.key === 'Escape') {
this.items.forEach(item => {
item.dialogOpen = false;
});
window.removeEventListener('keydown', this.handleKeyDown);
}
},
getData() {
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
// console.log(fullURL);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-bn/?cat=${fullURL}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// console.log(data);
this.items = data;
this.items.forEach(item => {
item.dialogOpen = false;
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
},
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Adjust as needed */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Additional styles for the overlay (optional) */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the overlay is above other content */
}
</style>