Kaydet (Commit) a09b4c1f authored tarafından Emincan Özcan's avatar Emincan Özcan

alternative apps wip

üst fe0807ec
<template>
<div class="px-6">
<header
class="w-full h-20 sticky flex items-center top-0 left-0 bg-gray-900"
class="w-full h-20 sticky flex items-center top-0 left-0 bg-gray-900 space-x-16"
>
<div class="flex items-center w-80 flex-shrink-0">
<div class="flex items-center w-96 flex-shrink-0">
<div class="relative w-full">
<input
class="w-full h-12 pl-4 pr-16 font-medium text-sm text-gray-300 bg-gray-800 rounded-lg overflow-hidden transition-all outline-none border-2 border-gray-800 hover:border-pardus-yellow focus:border-pardus-yellow"
......@@ -14,7 +14,7 @@
</div>
</div>
<div>
<h4 class="text-gray-300 font-medium lg:text-lg ml-8">
<h4 class="text-gray-300 font-medium lg:text-lg">
Alıştığınız Uygulamanın
<span class="text-pardus-yellow font-bold">PARDUS</span>
Alternatifleri!
......@@ -23,34 +23,30 @@
</header>
<div class="mt-8 min-w-full overflow-x-auto" style="width: max-content">
<div v-for="i in Array.from(Array(20))" :key="i">
<div class="flex items-center bg-gray-800 px-4 py-3 rounded-lg mb-4">
<div v-for="nonPardusApp in nonPardusApps" :key="nonPardusApp.id">
<div
class="flex items-center bg-gray-800 px-4 py-3 rounded-lg mb-4 space-x-16"
>
<!-- non pardus app -->
<div class="w-96">
<div class="flex items-center space-x-4">
<img
class="w-12 h-12"
src="https://upload.wikimedia.org/wikipedia/commons/0/03/Internet_Explorer_7%2B8_logo.svg"
alt=""
/>
<span class="font-medium text-lg">Internet Explorer</span>
<img class="w-10 h-10" :src="nonPardusApp.image_url" alt="" />
<span class="font-medium text-md">{{ nonPardusApp.name }}</span>
</div>
</div>
<!-- pardus app alternatives... -->
<div class="flex space-x-12">
<div
class="flex items-center"
:key="i"
v-for="i in Array.from(Array(4))"
:key="pardusApp.id"
v-for="pardusApp in getAlternativeAppsOfNonPardusAppById(
nonPardusApp.id
)"
>
<img
class="w-12 h-12 mr-2"
src="https://upload.wikimedia.org/wikipedia/commons/0/03/Internet_Explorer_7%2B8_logo.svg"
alt=""
/>
<span class="font-medium mr-4">Mozilla Firefox</span>
<img class="w-10 h-10 mr-2" :src="pardusApp.image_url" alt="" />
<span class="font-medium mr-4"> {{ pardusApp.name }}</span>
<button
class="bg-pardus-yellow px-2 py-2 font-medium rounded-lg shadow-lg text-gray-900"
class="bg-pardus-yellow px-2 py-1 font-medium rounded-lg shadow-lg text-gray-900"
>
Sepete Ekle
</button>
......@@ -64,11 +60,32 @@
<script>
import IconSearch from "../icons/icon-search.svg";
import store from "../global-state/store";
export default {
name: "AlternativeApps",
components: {
IconSearch,
},
setup() {
const { pardusApps, nonPardusApps } = store;
function getAlternativeAppsOfNonPardusAppById(id) {
const nonPardusApp = nonPardusApps.value.find((item) => item.id === id);
const pardusAppIds = nonPardusApp["pardus_apps"];
let ret = [];
pardusAppIds.forEach((pardusAppId) => {
const pardusApp = pardusApps.value.find(
(item) => item.id === pardusAppId
);
ret.push(pardusApp);
});
return ret;
}
return { nonPardusApps, getAlternativeAppsOfNonPardusAppById };
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment