Skip to content

Commit

Permalink
fix: refactor website var to fix build (#300)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theyokohamalife
theyokohamalife authored Dec 5, 2023
1 parent ca54c00 commit 2835d99
Showing 1 changed file with 91 additions and 66 deletions.
157 changes: 91 additions & 66 deletions components/SearchResultDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,103 @@
<template>
<div class="result-details landscape:min-w-[480px]">
<div class="header flex flex-1 bg-primary bg-gradient-to-r from-primary to-secondary">
<svg role="img" alt="Facility Banner Image" title="banner image"
class="banner-icon w-48 h-48 fill-primary-text-inverted ml-8">
<use xlink:href="../assets/images/doctors-banner.svg#doctors-icon-svg" />
</svg>
<div class="result-details landscape:min-w-[480px]">
<div class="header flex flex-1 bg-primary bg-gradient-to-r from-primary to-secondary">
<svg
role="img"
alt="Facility Banner Image"
title="banner image"
class="banner-icon w-48 h-48 fill-primary-text-inverted ml-8"
>
<use xlink:href="../assets/images/doctors-banner.svg#doctors-icon-svg" />
</svg>
</div>
<div class="result-content ml-2">
<div class="result-header mt-7 ml-4">
<span class="w-4 text-3xl font-bold pl-2 self-center">{{ healthcareProfessionalName }}</span>
</div>
<div class="result-details flex mb-1 ml-4 pl-2 text-sm">
<span class="pr-2">{{ specialty }}</span>
<span class="self-center">·</span>
<span class="px-2">{{ facilityName }}</span>
</div>
<div class="result-tags flex flex-wrap w-64 my-6 ml-4 pl-2">
<div
:key="index"
v-for="(spokenLanguage, index) in spokenLanguages"
class="pl-2 pr-2 py-[1px] mr-2 border-2 border-primary/40 rounded-full shadow-sm text-md text-primary hover:bg-primary/20 transition-all"
>{{ spokenLanguage }}</div>
</div>
<div class="about ml-4 pl-2">
<span class="font-semibold">About</span>
<div class="address flex my-4">
<svg
role="img"
alt="Facility Banner Image"
title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center"
>
<use xlink:href="../assets/images/map-pin-icon.svg#map-pin-icon-svg" />
</svg>
{{ address }}
</div>
<div class="hours flex my-4">
<svg
role="img"
alt="Facility Banner Image"
title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center"
>
<use xlink:href="../assets/images/time-icon.svg#time-icon-svg" />
</svg>
{{ hours }}
</div>
<div class="result-content ml-2">
<div class="result-header mt-7 ml-4">
<span class="w-4 text-3xl font-bold pl-2 self-center"> {{ healthcareProfessionalName }} </span>
</div>
<div class="result-details flex mb-1 ml-4 pl-2 text-sm">
<span class="pr-2"> {{ specialty }}</span>
<span class="self-center">·</span>
<span class="px-2"> {{ facilityName }}</span>
</div>
<div class="result-tags flex flex-wrap w-64 my-6 ml-4 pl-2">
<div :key="index" v-for="(spokenLanguage, index) in spokenLanguages"
class="pl-2 pr-2 py-[1px] mr-2
border-2 border-primary/40 rounded-full shadow-sm text-md text-primary hover:bg-primary/20 transition-all">
{{ spokenLanguage }}
</div>
</div>
<div class="about ml-4 pl-2">
<span class="font-semibold">About</span>
<div class="address flex my-4">
<svg role="img" alt="Facility Banner Image" title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center">
<use xlink:href="../assets/images/map-pin-icon.svg#map-pin-icon-svg" />
</svg>
{{ address }}
</div>
<div class="hours flex my-4">
<svg role="img" alt="Facility Banner Image" title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center">
<use xlink:href="../assets/images/time-icon.svg#time-icon-svg" />
</svg>
{{ hours }}
</div>
<div class="website flex my-4">
<svg role="img" alt="Facility Banner Image" title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center">
<use xlink:href="../assets/images/globe-icon.svg#globe-icon-svg" />
</svg>
<a href="{website}"> {{ website }}</a>
</div>
<div class="phone flex my-4">
<svg role="img" alt="Facility Banner Image" title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center">
<use xlink:href="../assets/images/phone-icon.svg#phone-icon-svg" />
</svg>
{{ phone }}
</div>
</div>
<div class="website flex my-4">
<svg
role="img"
alt="Facility Banner Image"
title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center"
>
<use xlink:href="../assets/images/globe-icon.svg#globe-icon-svg" />
</svg>
<a :href="website">{{ website }}</a>
</div>
<div class="phone flex my-4">
<svg
role="img"
alt="Facility Banner Image"
title="banner image"
class="banner-icon w-6 h-6 stroke-primary mr-2 self-center"
>
<use xlink:href="../assets/images/phone-icon.svg#phone-icon-svg" />
</svg>
{{ phone }}
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSearchResultsStore } from '~/stores/searchResultsStore'
const store = useSearchResultsStore()
import { computed } from "vue";
import { useSearchResultsStore } from "~/stores/searchResultsStore";
const healthcareProfessionalName = computed(() =>
`${store.$state.activeResult?.names[0].firstName} ${store.$state.activeResult?.names[0].lastName}`)
const specialty = computed(() => store.$state.activeResult?.specialties[0].names[0].name)
const facilityName = computed(() => store.$state.activeResult?.facilityName)
const spokenLanguages = computed(() => store.$state.activeResult?.spokenLanguages)
const address = computed(() => store.$state.activeResult?.address)
const hours = computed(() => store.$state.activeResult?.hours)
const website = computed(() => store.$state.activeResult?.website)
const phone = computed(() => store.$state.activeResult?.phone)
const store = useSearchResultsStore();
const healthcareProfessionalName = computed(
() =>
`${store.$state.activeResult?.names[0].firstName} ${store.$state.activeResult?.names[0].lastName}`
);
const specialty = computed(
() => store.$state.activeResult?.specialties[0].names[0].name
);
const facilityName = computed(() => store.$state.activeResult?.facilityName);
const spokenLanguages = computed(
() => store.$state.activeResult?.spokenLanguages
);
const address = computed(() => store.$state.activeResult?.address);
const hours = computed(() => store.$state.activeResult?.hours);
const website = computed(() => store.$state.activeResult?.website);
const phone = computed(() => store.$state.activeResult?.phone);
</script>

<style>
Expand Down

0 comments on commit 2835d99

Please sign in to comment.