Renata categories and item

rooty-next/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

rooty-next/.storybook/main.js

@@ -6,8 +6,7 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    'storybook-addon-next'
+    "@storybook/addon-interactions"
   ],
   "framework": "@storybook/react",
   "core": {

rooty-next/.storybook/preview.js

@@ -1,4 +1,5 @@
 import "../styles/globals.css"
+import 'semantic-ui-css/semantic.min.css'
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

rooty-next/components/Item.js

@@ -1,15 +1,36 @@
+import styled from "styled-components";
+import Image from 'next/image';
+import { FlexBox, Wrapper, ImgPlaceholder } from "../styles/globals";
+import Text from "./text";
+import { Icon } from "semantic-ui-react";
+import { Heart } from "./icons/icons";
+
+export default function Item({ id, name, rating, compensation, image, onClick=()=>{} }) {
 
 
-export default function Item({ id, name, rating, description }) {
-
   return (
-    <div>
-        <div key={id}>
-            <h1>{name}</h1>
-            <p><strong>Description:</strong> {description}</p>
-            <p><strong>Rating:</strong> {rating}</p>
-        </div>
-    </div>
+        <FlexBox onClick={onClick} key={id} width="338px" height="154px" color="#F6F6F9" borderRadius="8px" margin="20px" filter="drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.2))">
+          <ImgPlaceholder bgImage={image} width='138px'></ImgPlaceholder>
+          <FlexBox dir="column" padding="12px" height="154px" width="228px" alignItems="start" justifyContent="space-between">
+            <FlexBox alignItems="baseline">
+              <Text txt={name} size="16px" weight="bold" align="left"></Text>
+              <Heart></Heart>
+            </FlexBox>
+            <FlexBox alignItems="left" justifyContent="space-between" width="100%">
+              <Text txt={rating} size="15px" weight="regular"></Text>
+              {/* <FlexBox alignItems="flex-end">
+                  <div class="ui disabled rating" role="radiogroup" tabindex="0"><i tabindex="-1" aria-checked="false" aria-posinset="1" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="2" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="true" aria-posinset="3" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="4" aria-setsize="5" class="icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="5" aria-setsize="5" class="icon" role="radio"></i></div>
+              </FlexBox> */}  
+              {/* --- rating stars in case we want them */}
+              <FlexBox alignItems="baseline" justifyContent="space-around" width="40%">
+                  <Text txt={compensation} size="15px" weight="bold"></Text>
+                  <Text txt="or "></Text>
+                  <Icon name="exchange"></Icon>
+              </FlexBox>
+            </FlexBox>
+
+          </FlexBox>
+        </FlexBox>
   );
 };
 

rooty-next/components/categoryCard.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import Image from 'next/image';
+import { FlexBox, Wrapper, ImgPlaceholder } from "../styles/globals";
+import Text from "./text";
+import { Icon } from "semantic-ui-react";
+import { Heart } from "./icons/icons";
+
+
+export default function CategoryCard({ id, name, image, onClick=()=>{} }) {
+
+
+    return (
+          <FlexBox onClick={onClick} dir = "column" key={id} width="161px" height="147px" borderRadius="15px" margin="10px" bgImage={image} alignItems="end" justifyContent="end">
+            <FlexBox height="49px" width="100%" borderRadius="0px 0px 15px 15px" color="#F6F6F9" padding="2px 2px 2px 7px">
+            <Text txt={name} size="16px" weight="bold" align="left"></Text>
+            </FlexBox>
+          </FlexBox>
+    )
+  };

rooty-next/components/icons/icons.js

@@ -0,0 +1,16 @@
+import { Rating } from 'semantic-ui-react'
+
+
+// ------STARS
+const RatingExampleDisabled = () => (
+  <Rating defaultRating={3} maxRating={5} disabled />
+)
+
+export default RatingExampleDisabled;
+
+
+
+// ------HEART
+export const Heart = () => (
+  <Rating icon='heart' defaultRating={0} maxRating={1} size='huge'/>
+)

rooty-next/components/itemDescript.js

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import Image from 'next/image';
+import { FlexBox, Wrapper, ImgPlaceholder } from "../styles/globals";
+import Text from "./text";
+import { Icon } from "semantic-ui-react";
+import { Heart } from "./icons/icons";
+
+export default function Item({ id, name, rating, compensation, image, onClick=()=>{} }) {
+
+
+  return (
+        <FlexBox onClick={onClick} key={id} width="338px" height="154px" color="#F6F6F9" borderRadius="8px" margin="20px" filter="drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.2))">
+          <ImgPlaceholder bgImage={image} width='138px'></ImgPlaceholder>
+          <FlexBox dir="column" padding="12px" height="154px" width="228px" alignItems="start" justifyContent="space-between">
+            <FlexBox alignItems="baseline">
+              <Text txt={name} size="16px" weight="bold" align="left"></Text>
+              <Heart></Heart>
+            </FlexBox>
+            <FlexBox alignItems="left" justifyContent="space-between" width="100%">
+              <Text txt={rating} size="15px" weight="regular"></Text>
+              {/* <FlexBox alignItems="flex-end">
+                  <div class="ui disabled rating" role="radiogroup" tabindex="0"><i tabindex="-1" aria-checked="false" aria-posinset="1" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="2" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="true" aria-posinset="3" aria-setsize="5" class="active icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="4" aria-setsize="5" class="icon" role="radio"></i><i tabindex="-1" aria-checked="false" aria-posinset="5" aria-setsize="5" class="icon" role="radio"></i></div>
+              </FlexBox> */}  
+              {/* --- rating stars in case we want them */}
+              <FlexBox alignItems="baseline" justifyContent="space-around" width="40%">
+                  <Text txt={compensation} size="15px" weight="bold"></Text>
+                  <Text txt="or "></Text>
+                  <Icon name="exchange"></Icon>
+              </FlexBox>
+            </FlexBox>
+
+          </FlexBox>
+        </FlexBox>
+  );
+};

rooty-next/components/loginForm/index.js

@@ -1,6 +1,10 @@
 import { useState } from "react"
+import {Icon} from 'semantic-ui-react';
 
-export default function LoginForm({onLogin}) {
+export default function LoginForm({
+    onLogin=()=>{},
+    icons=false
+}) {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
 
@@ -11,6 +15,7 @@ export default function LoginForm({onLogin}) {
 
     return (
         <form onSubmit={handleSubmit}>
+            {icons && <Icon name="home" />}
             <label htmlFor="email">Email</label>
             <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
             <label htmlFor="password">Password</label>

rooty-next/components/loginForm/loginForm.stories.js

@@ -6,6 +6,6 @@ export default { // storybook requires a default export which tells it which com
     component: LoginForm,
 };
 
-export const Default = () => <LoginForm />; // any exports will be stories within storybook
-export const Test = () => <LoginForm />;
+export const DefaultForm = () => <LoginForm />; // any exports will be stories within storybook
+export const IconForm = () => <LoginForm icons/>;
 // export const WithOnLogin = () => <LoginForm onLogin={(email, password) => console.log(email, password)} />; // Example

rooty-next/components/review.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import Image from 'next/image';
+import { FlexBox, Wrapper, ImgPlaceholder } from "../styles/globals";
+import Text from "./text";
+import { Icon } from "semantic-ui-react";
+import { Heart } from "./icons/icons";
+// import Avatar from '@mui/material/Avatar';
+
+
+export default function Review({
+    name="name",
+    comment="Comment",
+    program="D3",
+    image="/3081629.jpg",
+    one="active icon", 
+    second="active icon", 
+    third="active icon", 
+    fourth="active icon", 
+    fifth="icon",
+    boxWidth="108px",
+    nameSize="16px"
+    // showStars=true
+}) {
+
+    return (
+          <FlexBox width="100%" minHeight={boxWidth} border= "0.5px solid rgba(191, 191, 191, 1)">
+                {/* <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> */}
+                <FlexBox width = "25%">
+                    <ImgPlaceholder height="50px" width="50px" bgImage={image} borderRadius="50%"></ImgPlaceholder>
+                </FlexBox>
+                <FlexBox dir="column" alignItems="flex-start" margin="10px" width = "80%">
+                    <FlexBox justifyContent="space-between" alignItems="flex-start" width="100%">
+                        <Text txt={name} weight="bold" size={nameSize}></Text>
+                        <FlexBox padding="0 10px 0 10px">
+                        <div className="ui disabled rating" role="radiogroup" tabIndex="0">
+                        <i tabIndex="-1" aria-checked="false" aria-posinset="1" aria-setsize="5" className={one} role="radio"></i>
+                        <i tabIndex="-1" aria-checked="false" aria-posinset="2" aria-setsize="5" className={second} role="radio"></i>
+                        <i tabIndex="-1" aria-checked="true" aria-posinset="3" aria-setsize="5" className={third} role="radio"></i>
+                        <i tabIndex="-1" aria-checked="false" aria-posinset="4" aria-setsize="5" className={fourth} role="radio"></i>
+                        <i tabIndex="-1" aria-checked="false" aria-posinset="5" aria-setsize="5" className={fifth} role="radio"></i>
+                        </div>
+                        </FlexBox>
+                    </FlexBox>
+                    <Text txt={program}></Text>
+                    <Text txt={comment}></Text>
+                </FlexBox>
+          </FlexBox>
+    );
+  };
+
+//   {{showStars}===true && 
+//                         <div className="ui disabled rating" role="radiogroup" tabIndex="0">
+//                         <i tabIndex="-1" aria-checked="false" aria-posinset="1" aria-setsize="5" className={one} role="radio"></i>
+//                         <i tabIndex="-1" aria-checked="false" aria-posinset="2" aria-setsize="5" className={second} role="radio"></i>
+//                         <i tabIndex="-1" aria-checked="true" aria-posinset="3" aria-setsize="5" className={third} role="radio"></i>
+//                         <i tabIndex="-1" aria-checked="false" aria-posinset="4" aria-setsize="5" className={fourth} role="radio"></i>
+//                         <i tabIndex="-1" aria-checked="false" aria-posinset="5" aria-setsize="5" className={fifth} role="radio"></i>
+//                         </div>
+//                         }

rooty-next/components/text/index.js

@@ -0,0 +1,26 @@
+import styled from "styled-components"
+
+export default function Text({
+    txt='Text Here',
+    size='16px',
+    weight='400',
+    align='left',
+    color='black',
+    padding='0px'
+  }){
+
+    return (
+      <TextContain fontSize={size} fontWeight={weight} textAlign={align} textColor={color} padding={padding}>
+        {txt}
+      </TextContain>
+    )
+}
+
+const TextContain = styled.div`
+font-size:${props=>props.fontSize};
+font-weight:${props=>props.fontWeight};
+text-align: ${props=>props.textAlign};
+color: ${props=>props.textColor};
+padding: ${props=>props.padding};
+line-height: normal;
+`;

rooty-next/next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  compiler:{
+    styledComponents: true
+  }
 }
 
 module.exports = nextConfig