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

Add MenuItem design

Browse source 
Clean up SCSS styles
This commit is contained in:
Michał Gdula 2024-04-23 16:41:05 +01:00
parent 4e6b2799f6
commit b56c3cc46d
13 changed files with 288 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

54
front/src/pages/components/MenuItem.svelte
View file

@ -1,26 +1,44 @@
<script>
import { link } from 'svelte-spa-router';
import { Acorn, Fish, Leaf, Flame } from "phosphor-svelte"
import LoadingImage from '/MenuItemLoadingAlt.svg';
export let id;
export let labels = [
"vegan",
"fish",
"nut",
"spicy",
]
export let name;
export let price;
export let id;
</script>
<a href="/item/{id}" use:link>
<span>{name}</span>
<span>£{price}</span>
</a>
<div class="menu-item">
<img src={LoadingImage} alt="" class="menu-item-image">
<style lang="scss">
a {
width: 200px;
height: 200px;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>
<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 === "spicy"}
<li class="spicy"><Flame weight="fill" /></li>
{/if}
{/each}
</ul>
<a href="/item/{id}" use:link>View</a>
</div>
<ul class="menu-item-detail">
<li>{name}</li>
<li>£{price}</li>
</ul>
</div>