changing layout file folder apply swiper js recomanded product

abrahmandevs · Nov 11, 2023 · 6ea3fad · 6ea3fad
1 parent d5090f2
commit 6ea3fad
Show file tree

Hide file tree

Showing 69 changed files with 534 additions and 4,341 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,30 +4,26 @@
 </script>
 
 <template>
-	<div class="font-rubik font-ligh">
+	<div>
 		<RouterView />
 	</div>
 </template>
 <style>
 	@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Martian+Mono:wght@300&family=Open+Sans&family=Raleway&family=Roboto:wght@300;400&family=Rubik:wght@300;400&display=swap");
 
-	.font-inter {
-		font-family: "Inter", sans-serif;
+	@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Poppins&family=Raleway&display=swap");
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: "Oxygen", sans-serif;
 	}
-	.font-martian-mono {
-		font-family: "Martian Mono", monospace;
+	body {
+		font-family: "Poppins", sans-serif;
 	}
-	.font-openSans {
-		font-family: "Open Sans", sans-serif;
-	}
-	.font-railway {
+	p {
 		font-family: "Raleway", sans-serif;
 	}
-	.font-roboto {
-		font-family: "Roboto", sans-serif;
-	}
-	.font-rubik {
-		font-family: "Rubik", sans-serif;
-	}
 </style>
-
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
diff --git a/src/components/WishListIcon.vue b/src/components/WishListIcon.vue
@@ -1,13 +1,16 @@
 <script setup>
 	import { defineProps } from "vue"
 	import { wishlist } from "../store/wishlistStore"
+	import { authStore } from "../store/authStore"
 	import { HeartIcon, ScaleIcon } from "@heroicons/vue/24/outline"
 
+	const auth = authStore
+
 	const porps = defineProps(["product"])
 </script>
 
 <template>
-	<button @click="wishlist.toggleWishlist(porps.product)" class="btn text-light p-1 border-0 rounded-0" :class="wishlist.wishlistStatus(product) ? 'bg-success' : 'bg-secondary'" style="height: 30px; width: 30px">
+	<button @click="wishlist.toggleWishlist(porps.product)" class="btn text-light p-1 border-0 rounded-0" :class="auth.isAuthenticated && wishlist.wishlistStatus(product) ? 'bg-success' : 'bg-secondary'" style="height: 30px; width: 30px">
 		<HeartIcon class="w-full h-full" />
 	</button>
 </template>

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { defineProps } from "vue"
-	import { ChevronRightIcon } from "@heroicons/vue/24/outline"
+	import { ChevronRightIcon, HomeIcon } from "@heroicons/vue/20/solid"
 	import { useRoute } from "vue-router"
 	const route = useRoute()
 	const fullPath = route.meta.breadcrumb
@@ -29,11 +29,14 @@
 <template>
 	<div class="space-y-0.5">
 		<h1 class="text-xl font-medium capitalize" :class="labelClass">{{ pathTitle[0].text }}</h1>
-		<div class="flex items-center gap-x-1 text-xs">
-			<template v-for="(path, key, index) in fullPath">
-				<router-link :to="{ name: path['route'] }" class="capitalize font-medium" :class="path == $route.name ? activeClass : pathClass"> {{ path["text"] }}</router-link>
-				<ChevronRightIcon v-if="key !== fullPath.length - 1" class="h-3.5 w-auto" :class="iconClass" />
-			</template>
+		<div class="d-flex align-items-center gap-x-1 text-xs">
+			<div v-for="(path, key, index) in fullPath" class="shrink-0 d-flex align-items-center" :key="index">
+				<router-link :to="{ name: path['route'] }" class="capitalize font-medium h6 mb-0" :class="path == $route.name ? activeClass : pathClass">
+					<HomeIcon v-if="'home' == path['route']" class="h-4 w-auto" :class="iconClass" />
+					<template v-if="'home' != path['route']">{{ path["text"] }} </template>
+				</router-link>
+				<ChevronRightIcon v-if="key !== fullPath.length - 1" class="h-4 w-auto" :class="iconClass" />
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/src/components/headers/AppTopbar.vue b/src/components/headers/AppTopbar.vue
diff --git a/src/components/swiper/Swiper.vue b/src/components/swiper/Swiper.vue
@@ -34,7 +34,7 @@
 		},
 		btnClass: {
 			type: String,
-			default: "",
+			default: "text-black bg-white",
 		},
 		stroke: {
 			type: [Number],
@@ -44,12 +44,12 @@
 		// Slide per view
 		slidesPerView: {
 			type: [String, Number],
-			default: 3,
+			default: 4,
 		},
 		// Space between
 		spaceBetween: {
 			type: [String, Number],
-			default: 20,
+			default: 10,
 		},
 		// loop
 		isLoop: {
@@ -83,19 +83,19 @@
 
 		isDynamicBullets: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		isClickable: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	})
 </script>
 
 <template>
 	<Swiper
 		:class="name"
-		class=""
+		class="border-0"
 		:autoplay="{
 			delay: duration,
 			disableOnInteraction: isDisableOnInteraction,
@@ -114,16 +114,15 @@
 		effect="fade"
 		:slides-per-view="slidesPerView"
 		:space-between="spaceBetween"
-		virtual
 	>
 		<!-- <SwiperController :slider="slider" /> -->
 		<slot name="controller">
-			<div class="absolute inset-0 z-10 flex items-center justify-between gap-1">
-				<button class="px-3 py-1 rounded text-black bg-white shrink-0 flex items-center justify-center" @click.stop="slider.slidePrev()">
-					<ChevronLeftIcon class="h-6 w-auto" :style="`stroke-width:${stroke} ;`" />
+			<div class="absolute inset-0 z-2 flex items-center justify-between gap-1" :class="btnGroupClass">
+				<button :class="btnClass" class="px-3 py-1 rounded shrink-0 flex items-center justify-center" @click.stop="slider.slidePrev()">
+					<ChevronLeftIcon class="w-auto" :style="`stroke-width:${stroke} ;`" style="height: 1.5rem" />
 				</button>
-				<button class="px-3 py-1 rounded text-black bg-white shrink-0 flex items-center justify-center" @click.stop="slider.slideNext()">
-					<ChevronRightIcon class="h-6 w-auto" :style="`stroke-width:${stroke} ;`" />
+				<button :class="btnClass" class="px-3 py-1 rounded shrink-0 flex items-center justify-center" @click.stop="slider.slideNext()">
+					<ChevronRightIcon class="w-auto" :style="`stroke-width:${stroke} ;`" style="height: 1.5rem" />
 				</button>
 			</div>
 		</slot>