Merge pull request #24 from TereseBo/add_reed_img

Add component for visual representation of reed

app/components/(userpages)/profile/reeds/AddReed.tsx

@@ -1,4 +1,4 @@
-//Component is a container for the card used to edit/delete/add loom to DB
+//Component is a container for the card used to add a reed to DB
 'use client'
 
 import { useState } from 'react'
@@ -13,11 +13,9 @@ export function AddReed() {
     const openForm = () => setIsOpen(true);
     const closeForm = () => setIsOpen(false);
 
-
     return (
         <>
             <div className={open ? 'buffer' : 'hidden'}>
-                {/* TODO: ADD Hide/show of card */}
                 <ReedCard reed={templateReed} closeForm={closeForm} />
             </div>
             {open ? <button onClick={closeForm}>Close card</button> : <button onClick={openForm}>Create reed</button>}

app/components/(userpages)/profile/reeds/EditReedForm.tsx

@@ -1,4 +1,4 @@
-//This component contains tye logic to sen POST, PUT, DELETE requests on single reeds by a user
+//This component contains tye logic to PUT and DELETE requests on single reeds by a user
 'use client'
 
 import { useState } from 'react'

app/components/(userpages)/profile/reeds/ReedCard.tsx

@@ -1,10 +1,10 @@
-
-//This component is a card for presenting a loom and also contains the logic to update/delete it.
+//This component is a card for presenting a ree contains the components to update/delete it.
 'use client'
 
 import { DisplayCard } from '@/app/components/(userpages)/DisplayCard'
 
 import { EditReedForm } from './EditReedForm'
+import { ReedImg } from './ReedImg'
 
 
 export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
@@ -13,12 +13,10 @@ export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
     return (
 
         <DisplayCard >
-
-            <div className='horizontal loom-card' >
+            <div className='vertical loom-card' >
+                <ReedImg reed={reed}/>
                 <EditReedForm reed={reed} closeForm={closeForm} />
-
             </div>
-
         </DisplayCard>
 
     )

app/components/(userpages)/profile/reeds/ReedImg.tsx

@@ -0,0 +1,24 @@
+import './reedimg.scss'
+
+export function ReedImg(props: { reed: Reed }) {
+
+    const { dents, section, unit } = props.reed
+
+    let slitSize = 1 / (dents / section)
+    let bar=0.2
+    let repeats = 6/(bar+slitSize)
+
+    repeats = repeats > 1 ? Math.floor(repeats) : Math.ceil(repeats)
+    const keys = new Array(repeats).fill('')
+
+    const slitComponets = keys.map((item, index) => {return <div key={index} className={`slit ${unit}`} style={{ width: `${slitSize}rem` }} />})
+
+    return (
+
+        <div className="reed-img" >
+            <div className="slit-container" style={{ gap: `${bar}rem` }}>
+                {slitComponets}
+            </div>
+        </div >
+    )
+}

app/components/(userpages)/profile/reeds/reedimg.scss

@@ -0,0 +1,29 @@
+@use '@/app/resources/style/variables.scss' as v;
+
+.reed-img{
+    max-width:100%;
+    $threadspace:1rem;
+
+
+    background-color: v.$metal-color;
+    border-radius: 5px 5px 5px 5px;
+    padding-left:0.2rem;
+    padding-right:0.2rem;
+
+    .slit-container{
+        margin:0.30rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        box-sizing: border-box;
+
+
+        background-color: v.$metal-color;
+        }
+
+        .slit{
+            height: calc($threadspace*2) ;
+           background-color: v.$secondary-color;
+
+    }
+}

app/resources/style/variables.scss

@@ -9,6 +9,8 @@ $accent-color2: rgb(118, 56, 141);
 
 $tertiary-color: rgb(124, 119, 119);
 
+$metal-color: rgb(68, 66, 68);
+
 $thin-border: 1px solid $accent-color1;
 $thick-border: 2px solid $accent-color1;