118 lines
2.7 KiB
Svelte
118 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import FontAwesome from "@components/form/FontAwesome.svelte";
|
|
import { slugify } from "@utils/fetch-data";
|
|
|
|
export let categoryName: string;
|
|
export let sectionName: string;
|
|
export let serviceName: string;
|
|
export let showLabel: boolean = false;
|
|
|
|
const serviceRef = `${slugify(categoryName)}/${slugify(sectionName)}/${slugify(serviceName)}`;
|
|
|
|
let isSaved = false;
|
|
|
|
onMount(async () => {
|
|
const stored = JSON.parse(localStorage.getItem('savedServices') || '[]');
|
|
if (stored.includes(serviceRef)) {
|
|
isSaved = true;
|
|
}
|
|
});
|
|
|
|
function toggleSave() {
|
|
const stored = JSON.parse(localStorage.getItem('savedServices') || '[]');
|
|
const index = stored.indexOf(serviceRef);
|
|
if (index === -1) {
|
|
stored.push(serviceRef);
|
|
isSaved = true;
|
|
} else {
|
|
stored.splice(index, 1);
|
|
isSaved = false;
|
|
}
|
|
localStorage.setItem('savedServices', JSON.stringify(stored));
|
|
}
|
|
</script>
|
|
|
|
<div class="wrapper-or-something">
|
|
<button
|
|
class={`save-container ${isSaved ? 'saved' : ''} ${showLabel ? 'label-button' : ''}`}
|
|
title={`Save ${serviceName}`}
|
|
on:click={toggleSave}>
|
|
{#if showLabel }
|
|
<span>
|
|
{isSaved ? 'Saved' : 'Save'}
|
|
</span>
|
|
{/if}
|
|
<FontAwesome iconName="saveListing"/>
|
|
</button>
|
|
|
|
{#if showLabel && isSaved }
|
|
<div class="done-msg">
|
|
You can view all saved items in your <a href="/inventory">Inventory</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.wrapper-or-something {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
gap: 0.25rem;
|
|
}
|
|
.save-container {
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
transition: all 0.2s ease-in-out;
|
|
span {
|
|
font-size: 1.2rem;
|
|
opacity: 0.8;
|
|
color: var(--foreground);
|
|
font-family: "Lekton";
|
|
}
|
|
:global(svg) {
|
|
color: var(--foreground);
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
opacity: 0.5;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
&:hover {
|
|
:global(svg) {
|
|
color: var(--accent-3);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.saved {
|
|
:global(svg) {
|
|
color: var(--accent-2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.label-button {
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: var(--curve-sm);
|
|
box-shadow: 3px 3px 0 var(--box-outline);
|
|
border: 1px solid var(--box-outline);
|
|
background: var(--background-form);
|
|
|
|
&:hover {
|
|
|
|
box-shadow: 4px 4px 0 var(--box-outline);
|
|
}
|
|
}
|
|
}
|
|
|
|
.done-msg {
|
|
max-width: 165px;
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
@media(max-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|