From d075ee116fd256449ffa853448f5f972222e01b3 Mon Sep 17 00:00:00 2001
From: TereseBo <terese.boderus@gmail.com>
Date: Tue, 23 Apr 2024 13:49:34 +0200
Subject: [PATCH 1/2] Added components for reed visual

---
 .../(userpages)/profile/reeds/ReedCard.tsx    |  4 ++-
 .../(userpages)/profile/reeds/ReedImg.tsx     | 29 ++++++++++++++++
 .../(userpages)/profile/reeds/reedimg.scss    | 33 +++++++++++++++++++
 app/resources/style/variables.scss            |  2 ++
 4 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 app/components/(userpages)/profile/reeds/ReedImg.tsx
 create mode 100644 app/components/(userpages)/profile/reeds/reedimg.scss

diff --git a/app/components/(userpages)/profile/reeds/ReedCard.tsx b/app/components/(userpages)/profile/reeds/ReedCard.tsx
index 163dcaf..ca6f6fb 100644
--- a/app/components/(userpages)/profile/reeds/ReedCard.tsx
+++ b/app/components/(userpages)/profile/reeds/ReedCard.tsx
@@ -5,6 +5,7 @@
 import { DisplayCard } from '@/app/components/(userpages)/DisplayCard'
 
 import { EditReedForm } from './EditReedForm'
+import { ReedImg } from './ReedImg'
 
 
 export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
@@ -14,7 +15,8 @@ export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
 
         <DisplayCard >
 
-            <div className='horizontal loom-card' >
+            <div className='vertical loom-card' >
+                <ReedImg reed={reed}/>
                 <EditReedForm reed={reed} closeForm={closeForm} />
 
             </div>
diff --git a/app/components/(userpages)/profile/reeds/ReedImg.tsx b/app/components/(userpages)/profile/reeds/ReedImg.tsx
new file mode 100644
index 0000000..c0bff42
--- /dev/null
+++ b/app/components/(userpages)/profile/reeds/ReedImg.tsx
@@ -0,0 +1,29 @@
+import './reedimg.scss'
+
+export function ReedImg(props: { reed: Reed }) {
+
+    const { dents, section, unit, length } = 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 >
+
+    )
+
+}
\ No newline at end of file
diff --git a/app/components/(userpages)/profile/reeds/reedimg.scss b/app/components/(userpages)/profile/reeds/reedimg.scss
new file mode 100644
index 0000000..f265a63
--- /dev/null
+++ b/app/components/(userpages)/profile/reeds/reedimg.scss
@@ -0,0 +1,33 @@
+@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;
+
+    $slits:calc($threadspace*0.30);
+    $slitsmarg:calc(($threadspace - $slits ) /2);
+
+
+    .slit-container{
+        margin:$slits;
+        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;
+            
+    }
+}
\ No newline at end of file
diff --git a/app/resources/style/variables.scss b/app/resources/style/variables.scss
index 95f006e..585df25 100644
--- a/app/resources/style/variables.scss
+++ b/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;
 

From bc300141fa3d6c1b13ad92ff4c050cae9d6ddfa7 Mon Sep 17 00:00:00 2001
From: TereseBo <terese.boderus@gmail.com>
Date: Tue, 23 Apr 2024 13:58:31 +0200
Subject: [PATCH 2/2] Formatting

---
 app/components/(userpages)/profile/reeds/AddReed.tsx     | 4 +---
 .../(userpages)/profile/reeds/EditReedForm.tsx           | 2 +-
 app/components/(userpages)/profile/reeds/ReedCard.tsx    | 6 +-----
 app/components/(userpages)/profile/reeds/ReedImg.tsx     | 9 ++-------
 app/components/(userpages)/profile/reeds/reedimg.scss    | 6 +-----
 5 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/app/components/(userpages)/profile/reeds/AddReed.tsx b/app/components/(userpages)/profile/reeds/AddReed.tsx
index 1c069b9..ef7e3b4 100644
--- a/app/components/(userpages)/profile/reeds/AddReed.tsx
+++ b/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>}
diff --git a/app/components/(userpages)/profile/reeds/EditReedForm.tsx b/app/components/(userpages)/profile/reeds/EditReedForm.tsx
index 239fc4b..a32c77a 100644
--- a/app/components/(userpages)/profile/reeds/EditReedForm.tsx
+++ b/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'
diff --git a/app/components/(userpages)/profile/reeds/ReedCard.tsx b/app/components/(userpages)/profile/reeds/ReedCard.tsx
index ca6f6fb..5196c22 100644
--- a/app/components/(userpages)/profile/reeds/ReedCard.tsx
+++ b/app/components/(userpages)/profile/reeds/ReedCard.tsx
@@ -1,5 +1,4 @@
-
-//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'
@@ -14,13 +13,10 @@ export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
     return (
 
         <DisplayCard >
-
             <div className='vertical loom-card' >
                 <ReedImg reed={reed}/>
                 <EditReedForm reed={reed} closeForm={closeForm} />
-
             </div>
-
         </DisplayCard>
 
     )
diff --git a/app/components/(userpages)/profile/reeds/ReedImg.tsx b/app/components/(userpages)/profile/reeds/ReedImg.tsx
index c0bff42..50fb517 100644
--- a/app/components/(userpages)/profile/reeds/ReedImg.tsx
+++ b/app/components/(userpages)/profile/reeds/ReedImg.tsx
@@ -2,7 +2,7 @@ import './reedimg.scss'
 
 export function ReedImg(props: { reed: Reed }) {
 
-    const { dents, section, unit, length } = props.reed
+    const { dents, section, unit } = props.reed
     
     let slitSize = 1 / (dents / section)
     let bar=0.2
@@ -11,10 +11,7 @@ export function ReedImg(props: { reed: Reed }) {
     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` }} />
-    })
+    const slitComponets = keys.map((item, index) => {return <div key={index} className={`slit ${unit}`} style={{ width: `${slitSize}rem` }} />})
 
     return (
 
@@ -23,7 +20,5 @@ export function ReedImg(props: { reed: Reed }) {
                 {slitComponets}
             </div>
         </div >
-
     )
-
 }
\ No newline at end of file
diff --git a/app/components/(userpages)/profile/reeds/reedimg.scss b/app/components/(userpages)/profile/reeds/reedimg.scss
index f265a63..134c183 100644
--- a/app/components/(userpages)/profile/reeds/reedimg.scss
+++ b/app/components/(userpages)/profile/reeds/reedimg.scss
@@ -10,12 +10,8 @@
     padding-left:0.2rem;
     padding-right:0.2rem;
 
-    $slits:calc($threadspace*0.30);
-    $slitsmarg:calc(($threadspace - $slits ) /2);
-
-
     .slit-container{
-        margin:$slits;
+        margin:0.30rem;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;