Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-29 14:53:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Dropdowns

Browse source 
Rename folder from Components to Elements
Clean up font sizing and weighting
This commit is contained in:
Michał Gdula 2024-04-24 14:47:47 +01:00
parent 1d4f6d5b70
commit 03aef063bc
19 changed files with 628 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

48
front/src/pages/elements/MenuItem.svelte Normal file
View file

@ -0,0 +1,48 @@
<script>
import { link } from 'svelte-spa-router';
import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from "phosphor-svelte"
import LoadingImage from '/MenuItemLoadingAlt.svg';
export let id;
export let name;
export let price;
export let image;
export let labels = []
</script>
<div class="menu-item">
{#if !image}
<img src={LoadingImage} alt="" class="menu-item-image">
{:else}
<img src={image} alt="" class="menu-item-image">
{/if}
<div class="menu-item-header">
<ul>
{#each labels as label}
{#if label === "vegan"}
<li class="vegan"><Leaf weight="fill" /></li>
{/if}
{#if label === "fish"}
<li class="fish"><Fish weight="fill" /></li>
{/if}
{#if label === "nut"}
<li class="nut"><Acorn weight="fill" /></li>
{/if}
{#if label === "gluten"}
<li class="gluten"><GrainsSlash weight="fill" /></li>
{/if}
{#if label === "spicy"}
<li class="spicy"><Pepper weight="fill" /></li>
{/if}
{/each}
</ul>
<a href="/item/{id}" use:link>View <ArrowUpRight /></a>
</div>
<ul class="menu-item-detail">
<li>{name}</li>
<li>£{price}</li>
</ul>
</div>