Added skeleton loader.

BaselHack2022 · Oct 22, 2022 · e87e5b2 · e87e5b2
1 parent 2f79b34
commit e87e5b2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/components/Content.tsx b/components/Content.tsx
@@ -165,7 +165,7 @@ export const Content = () => {
                       fontSize: "$sm",
                     }}
                   >
-                    {item.kcal} kcal
+                    12x
                   </Text>
                 </Row>
               </Card.Footer>
@@ -185,7 +185,7 @@ export const Content = () => {
           <Grid.Container justify="center" gap={1}>
             <Grid xs={6}>
               <Text size={18} weight="bold" css={{ verticalAlign: "middle" }}>
-                {selected.length} selected
+                {selected.length} ausgewählt
               </Text>
             </Grid>
             <Grid xs={6}>
@@ -196,7 +196,7 @@ export const Content = () => {
                 style={{ width: "100%" }}
                 onPress={() => handleSubmit()}
               >
-                Go
+                Suchen
               </Button>
             </Grid>
           </Grid.Container>
@@ -213,7 +213,7 @@ export const Content = () => {
       >
         <Modal.Header>
           <Text id="modal-name" size={18}>
-            Recommended Recipes
+            Empfohlene Rezepte
           </Text>
         </Modal.Header>
         <Modal.Body>
@@ -227,7 +227,7 @@ export const Content = () => {
         </Modal.Body>
         <Modal.Footer>
           <Button flat auto color="error" onClick={() => setVisible(false)}>
-            Close
+            Schliessen
           </Button>
         </Modal.Footer>
       </Modal>

diff --git a/components/IngredientsTable.tsx b/components/IngredientsTable.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Input, Table } from "@nextui-org/react";
+import { Button, Grid, Input, Table } from "@nextui-org/react";
 import { Ingredient } from "../models/ingredient";
 
 export interface IngredientsTableProps {
@@ -14,15 +14,7 @@ const IngredientsTable: React.FC<IngredientsTableProps> = ({
   const [persons, setPersons] = useState<number>(p);
 
   return (
-    <Grid.Container gap={2}>
-      <Grid xs={12}>
-        <Input
-          label="Personen"
-          type="number"
-          placeholder={persons.toString()}
-          onInput={(e) => setPersons(Number(e.currentTarget.value))}
-        />
-      </Grid>
+    <Grid.Container gap={1}>
       <Grid xs={12}>
         <Table
           css={{
@@ -31,8 +23,12 @@ const IngredientsTable: React.FC<IngredientsTableProps> = ({
           }}
         >
           <Table.Header>
-            <Table.Column>Anzahl</Table.Column>
-            <Table.Column>Zutat</Table.Column>
+            <Table.Column>
+              <Grid.Container>
+                <Grid>Anzahl</Grid>
+              </Grid.Container>
+            </Table.Column>
+            <Table.Column>Zutaten</Table.Column>
           </Table.Header>
           <Table.Body>
             {ingredients.map((ingredient) => (

diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
@@ -32,6 +32,7 @@ const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
         width="100%"
         height={150}
         alt={recipe.name}
+        showSkeleton
       />
     </Card>
   );