diff --git a/app/components/cards/drink.page.tsx b/app/components/cards/drink.page.tsx index 7689f4e..3d25f03 100644 --- a/app/components/cards/drink.page.tsx +++ b/app/components/cards/drink.page.tsx @@ -1,6 +1,6 @@ import { Manufacturer } from '@zenstackhq/runtime/models'; -import { Col, Container, Image, Row } from 'react-bootstrap'; +import { Col, Container, Image, Row, Table } from 'react-bootstrap'; import { ContainerWithSection, DrinkComposite, isDrinkWithContainersAndSection, isDrinkWithManufacturer, isDrinkWithStyle } from '~/models/types'; interface Arguments { @@ -30,39 +30,74 @@ function DrinkPage(arg:Arguments) { return ( -
+

{arg.drink.name}

+ ABV: {arg.drink.abv}% {arg.drink.gluten ? "" : " | Gluten-free"} {arg.drink.organic ? " | Organic" : ""}

{arg.drink.description}

+ + + + + + + + + + +
- +

Inventory

{totalinventory == 0 ? ( "No inventory" - ) : ""} - {containers.map((container) => ( -

{container.section.name} | {container.type} | {container.inventory}

- ))} + ) : ( + + + + + + + + + + {containers.map((container) => ( + + + + + + ))} + +
SectionContainerAmount
{container.section.name}{container.type}{container.inventory}
+ )}
{ manufacturer ? ( - -
-

{manufacturer.name}

-

{manufacturer.description}

-
+ + + + +

{manufacturer.name} ({manufacturer.country_id})

+

{manufacturer.description}

+ + + + +
+
) : ""}
diff --git a/app/components/filters/drink.filter.tsx b/app/components/filters/drink.filter.tsx index 94ba64b..ae9e68e 100644 --- a/app/components/filters/drink.filter.tsx +++ b/app/components/filters/drink.filter.tsx @@ -57,6 +57,7 @@ function DrinkFilter(arg : Arguments) { Sort { [ ["name", "Name"], + ["popular", "Popularity"], ["abv-asc", "ABV Low -> High"], ["abv-desc", "ABV High -> Low"], ["inv-asc", "Inventoy Low -> High"], @@ -89,7 +90,7 @@ function DrinkFilter(arg : Arguments) { Drink - { ["Gluten-free", "Lactose-free", "Organic"].map(key => ( + { ["Gluten-free", "Organic"].map(key => ( - { loggedin ? ( - - ) : "" }