l-min-components 0.2.0

package/src/components/developerAPIdocs/index.jsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import {
+  CardContainer,
+  CardRightSection,
+  CardLeftSection,
+} from "./index.styled";
+import DropDownComponent from "../dropdown component";
+import bannerImg from "./assets/learngual_developer_api_doc.png";
+import { ArrowIcon, FolderOpenIcon, FolderCloseIcon } from "./assets/icons";
+
+/**
+ * @param {{
+ *  style: CSSProperties,
+ * }} props - properties of Component
+ *
+ */
+const DevAPIdocs = (props) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const documentationList = [
+    "Learngual API",
+    "Introduction",
+    "API Keys",
+    "API Regions",
+    "API Versioning",
+    "API Limits ",
+    "Terms of Service",
+  ];
+
+  const handleActiveTab = (idx) => {
+    setActiveTab(idx);
+  };
+
+  return (
+    <CardContainer style={props.style}>
+      <CardLeftSection>
+        <h1> Documentation </h1>
+        <div className="docs__contents">
+          {documentationList.map((item, idx) => (
+            <p
+              className={activeTab === idx ? "active" : ""}
+              onClick={() => {
+                handleActiveTab(idx);
+              }}
+              key={idx}
+            >
+              {item}
+            </p>
+          ))}
+          <div className="folder__structure">
+            <div className="folder__group">
+              <p>
+                <span>
+                  <ArrowIcon /> <FolderCloseIcon />{" "}
+                </span>
+                v9 (Latest)
+              </p>
+            </div>
+
+            <div className="folder__group folder__open_group">
+              <p>
+                <span>
+                  <ArrowIcon /> <FolderOpenIcon />{" "}
+                </span>
+                v9 (Latest)
+              </p>
+              <div className="api__info">
+                <p>
+                  <span className="api__type"> POST </span> Score a word or
+                  sentence
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardLeftSection>
+
+      <CardRightSection>
+        <div className="top__header">
+          <DropDownComponent
+            className="dropdown-content"
+            header="Environment"
+            inputPlaceHolder="Select"
+            dropdownData={[
+              { name: "Option 1", value: "Option One" },
+              { name: "Option 2", value: "Option Two" },
+              { name: "Option 3", value: "Option Three" },
+            ]}
+          />
+
+          <DropDownComponent
+            className="dropdown-content"
+            header="Layout"
+            inputPlaceHolder="Select"
+            dropdownData={[
+              { name: "Option 1", value: "Option One" },
+              { name: "Option 2", value: "Option Two" },
+              { name: "Option 3", value: "Option Three" },
+            ]}
+          />
+
+          <DropDownComponent
+            className="dropdown-content"
+            header="Language"
+            inputPlaceHolder="Select"
+            dropdownData={[
+              { name: "Option 1", value: "Option One" },
+              { name: "Option 2", value: "Option Two" },
+              { name: "Option 3", value: "Option Three" },
+            ]}
+          />
+        </div>
+
+        <section className="details__section">
+          <h2> Learngual API </h2>
+          <img src={bannerImg} alt="Learngual Developer ApI" />
+
+          <p>
+            Speechace is a Speech Recognition API for fluency and pronunciation
+            assessment. Our patented technology is unique in its ability to
+            score a learner's speech and pinpoint individual syllable and
+            phoneme level mistakes in a user's pronunciation in real time.
+          </p>
+
+          <div className="new__section">
+            <h4> NEW! v9 Spontaneous Speech Scoring</h4>
+            <h4>
+              with Relevance Assessment & Comprehensive IELTS, PTE, TOEIC, CEFR
+              Speaking scores
+            </h4>
+
+            <p>
+              Speechace API v9.0 now supports transcription and assessment of
+              spontaneous speech questions in context if a given question
+              prompt. The API:{" "}
+            </p>
+            <p> Transcribes the audio response </p>
+            <p>
+              Evaluates Relevance of the response given a relevance_context{" "}
+            </p>
+            <p>
+              Evaluates: Pronunciation, Fluency, Coherence, Vocabulary, Grammar
+            </p>
+            <p>
+              Returns scores on multiple standard scales: IELTS, PTE, TOEIC,
+              CEFR See Transcribe & Score API for details.
+            </p>
+          </div>
+        </section>
+      </CardRightSection>
+    </CardContainer>
+  );
+};
+
+export default DevAPIdocs;

package/src/components/developerAPIdocs/index.styled.js

@@ -0,0 +1,137 @@
+import styled from "styled-components";
+
+export const CardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  font-family: "Nunito";
+  width: 100%;
+  border-radius: 30px;
+  display: flex;
+`;
+
+export const CardLeftSection = styled.div`
+  width: 26%;
+  background-color: rgba(0, 194, 194, 0.1);
+  padding: 41px 14px 30px 10px;
+  border-radius: 30px 0 0 30px;
+  transition: all 0.9s;
+
+  h1 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #313333;
+    margin-bottom: 16px;
+    text-align: center;
+  }
+
+  p {
+    color: #313333;
+    padding: 3px 10px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 15px;
+    cursor: pointer;
+
+    &.active {
+      background-color: rgba(0, 153, 153, 0.1);
+      font-weight: 600;
+    }
+  }
+
+  .folder__structure {
+    .folder__group {
+      margin-bottom: 8px;
+      transition: all 0.3s;
+
+      p,
+      span {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0;
+      }
+
+      p {
+        font-weight: 500;
+        font-size: 14px;
+        color: #313333;
+      }
+
+      span {
+        margin-right: 6px;
+      }
+
+      svg {
+        margin-right: 12px;
+      }
+
+      .api__info {
+        margin-left: 18px;
+        .api__type {
+          color: #e6ad0e;
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .folder__open_group {
+      margin-left: 18px;
+
+      svg:first-child {
+        transform: rotate(90deg);
+      }
+    }
+  }
+`;
+
+export const CardRightSection = styled.div`
+  width: 74%;
+  padding: 21px 25px;
+  border-radius: 0 30px 30px 0;
+
+  .top__header {
+    display: flex;
+    column-gap: 15px;
+    margin-bottom: 17px;
+
+    h3 {
+      margin-bottom: 8px;
+    }
+
+    .dropdown-content div {
+      height: 44px;
+    }
+  }
+
+  .details__section {
+    .new__section {
+      padding-top: 15px;
+      border-top: 1px solid #d9d9d9;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+    img {
+      width: 100%;
+      margin-bottom: 17px;
+    }
+    h2 {
+      color: #313333;
+      font-weight: 600;
+      font-size: 24px;
+      margin-bottom: 14px;
+    }
+
+    h4 {
+      font-weight: 600;
+      font-size: 18px;
+      color: #000000;
+      margin-bottom: 15px;
+    }
+
+    p {
+      color: #000000;
+      margin-bottom: 20px;
+      font-size: 13px;
+    }
+  }
+`;

package/src/components/dropdown component/index.jsx

@@ -0,0 +1,139 @@
+import { useState, CSSProperties, useEffect } from "react";
+import {
+  ControlInput,
+  DropDownContainer,
+  DropDownContent,
+  DropDownControls,
+  DropDownHeader,
+  DropDownItem,
+} from "./styles";
+/**
+ * @param {{
+ * dropdownData: Array,
+ * header: string,
+ * searchable: boolean,
+ * className: string,
+ * onSelect: Function,
+ * inputPlaceHolder: string,
+ * }} props - properties of the dropdown component
+ */
+// dropdownData - Array of objects with property values of name and value
+// header - this specifies the label of the dropdown
+// searchable - property that includes search functionality or not
+// className - if this one isn't self-explanatory, leave React.
+// onSelect - this is a function that runs onselect and returns a selected object value.
+// inputPlaceHolder - this is a placeholder for the dropdown
+
+const DropDownComponent = (props) => {
+  // select state that dictates the current value.
+  const [selected, setSelected] = useState();
+
+  // dropdown state that dictates if dropdown is dropped or not.
+  const [dropdown, setDropdown] = useState();
+
+  //search params
+  const [searchParam, setSearchParam] = useState();
+
+  // useEffect to return a function value onChange
+  useEffect(() => {
+    props?.onSelect && props?.onSelect(selected);
+  }, [selected]);
+
+  return (
+    <DropDownContainer className={props?.className}>
+      <DropDownHeader>{props?.header}</DropDownHeader>
+      <DropDownControls>
+        {props?.searchable ? (
+          <ControlInput
+            placeholder={props?.inputPlaceHolder || "Select Dropdown"}
+            type="text"
+            onChange={(e) => {
+              setSearchParam(e.target.value);
+            }}
+          />
+        ) : (
+          <p onClick={() => setDropdown(!dropdown)}>{selected?.name}</p>
+        )}
+        <DownIcon onClick={() => setDropdown(!dropdown)} />
+        {searchParam && dropdown && (
+          <DropDownContent>
+            {props?.dropdownData?.map((dropdownItem, idx) => {
+              if (props?.dropdownData[idx]?.name?.includes(searchParam))
+                return (
+                  <DropDownItem
+                    key={idx}
+                    onClick={() => {
+                      setSelected(dropdownItem);
+                      setDropdown();
+                    }}
+                  >
+                    <span>{dropdownItem?.name}</span>
+                    {selected === dropdownItem && <Tick />}
+                  </DropDownItem>
+                );
+            })}
+          </DropDownContent>
+        )}
+        {!searchParam && dropdown && (
+          <DropDownContent>
+            {props?.dropdownData?.map((dropdownItem, idx) => {
+              return (
+                <DropDownItem
+                  key={idx}
+                  onClick={() => {
+                    setSelected(dropdownItem);
+                    setDropdown();
+                  }}
+                >
+                  <span>{dropdownItem?.name}</span>
+                  {selected === dropdownItem && <Tick />}
+                </DropDownItem>
+              );
+            })}
+          </DropDownContent>
+        )}
+      </DropDownControls>
+    </DropDownContainer>
+  );
+};
+export default DropDownComponent;
+
+export const DownIcon = ({ width, height, fill, onClick }) => {
+  return (
+    <svg
+      width={width || "14"}
+      height={height || "8"}
+      viewBox="0 0 14 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+    >
+      <path
+        d="M1 1L7 7L13 1"
+        stroke={fill || "#18191B"}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export const Tick = ({ size, stroke }) => {
+  return (
+    <svg
+      width={size || "16"}
+      height={size || "16"}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3828 4.23828L5.82031 11.7383L3.00781 8.92578"
+        stroke={stroke || "white"}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};

package/src/components/dropdown component/styles.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import(
+  "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"
+);
+
+export const DropDownContainer = styled.div`
+  width: 100%;
+`;
+
+export const DropDownHeader = styled.h3`
+  font-size: 14px;
+  font-family: "Nunito", sans-serif;
+  font-weight: 600;
+  color: #313333;
+`;
+
+export const DropDownControls = styled.div`
+  display: flex;
+  border: 1px solid rgba(49, 51, 51, 1);
+  border-radius: 12px;
+  align-items: center;
+  padding: 11px 20px;
+  position: relative;
+  p {
+    font-size: 16px;
+    font-family: "Nunito", sans-serif;
+    width: 100%;
+    cursor: pointer;
+    margin: 0;
+  }
+  svg {
+    cursor: pointer;
+  }
+`;
+
+export const ControlInput = styled.input`
+  font-size: 16px;
+  font-family: "Nunito", sans-serif;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  cursor: caret;
+`;
+
+export const DropDownContent = styled.ul`
+  position: absolute;
+  top: 25px;
+  left: 0;
+  list-style-type: none;
+  padding-left: 20px;
+  width: 100%;
+  padding: 4px;
+`;
+
+export const DropDownItem = styled.li`
+  font-family: "Nunito", sans-serif;
+  padding: 4px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f5f7f7;
+  svg {
+    cursor: pointer;
+    path {
+      stroke: rgba(49, 51, 51, 1);
+    }
+  }
+  &:hover {
+    color: white;
+    background: rgba(0, 194, 194, 1);
+    cursor: pointer;
+    transition: background 0.4s;
+    svg {
+      path {
+        stroke: white;
+      }
+    }
+  }
+`;

package/src/components/friendRequest/friendRequestCard/doc.md

@@ -0,0 +1,49 @@
+# FriendRequestCard Component
+
+The `FriendRequestCard` component is a reusable React component that renders a card displaying information about a friend request. It takes in several props:
+
+- `user`: an object representing the user who sent the friend request. It has the following properties:
+  - `id`: a unique identifier for the user
+  - `profileImage`: a URL pointing to the user's profile image
+  - `profileName`: the user's full name
+  - `userName`: the user's username
+- `count`: an integer representing the number of friend requests the user has received. This prop is optional and is only used when the card is being displayed in a list of friend requests.
+- `seeAll`: a callback function that is called when the user clicks the "See All" button. This prop is optional and is only used when the card is being displayed in a list of friend requests.
+- `showCountAndSeeAllButtons`: a boolean indicating whether the "count" and "see all" buttons should be displayed. This prop is optional and is only used when the card is being displayed in a list of friend requests.
+- `showAcceptDeclineButtons`: a boolean indicating whether the "accept" and "decline" buttons should be displayed. This prop is optional and is only used when the card is being displayed individually (i.e., not in a list of friend requests).
+- `onAdd`: a callback function that is called when the user clicks the "Accept" button. It takes in the `user` object as an argument.
+- `onDecline`: a callback function that is called when the user clicks the "Decline" button. It takes in the `user` object as an argument.
+
+## Usage
+
+```jsx
+import FriendRequestCard from "./FriendRequestCard";
+
+const user = {
+  id: 1,
+  profileImage: "https://via.placeholder.com/50",
+  profileName: "John Doe",
+  userName: "@johndoe",
+};
+
+const handleAdd = (user) => {
+  console.log("Accepted:", user);
+};
+
+const handleDecline = (user) => {
+  console.log("Declined:", user);
+};
+
+const Example = () => {
+  return (
+    <FriendRequestCard
+      user={user}
+      count={3}
+      seeAll={() => console.log("See all clicked")}
+      showCountAndSeeAllButtons={true}
+      showAcceptDeclineButtons={false}
+      onAdd={handleAdd}
+      onDecline={handleDecline}
+    />
+  );
+};

package/src/components/friendRequest/friendRequestCard/index.jsx

@@ -0,0 +1,82 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {
+  AcceptButton,
+  ButtonContainer,
+  CardContainer,
+  CardText,
+  CountButton,
+  DeclineButton,
+  Header,
+  ProfileImage,
+  ProfileName,
+  SeeAllButton,
+  UserName,
+  Wrapper,
+} from "./styles";
+
+const FriendRequestCard = ({
+  user,
+  count,
+  showCountAndSeeAllButtons,
+  showAcceptDeclineButtons,
+  onAdd,
+  onDecline,
+  seeAll,
+}) => {
+  return (
+    <Wrapper>
+      {/* {showCountAndSeeAllButtons && <Header>Friend Request</Header>
+      } */}
+      <Header>Friend Request</Header>
+      <CardContainer multiple={showCountAndSeeAllButtons}>
+        <ProfileImage src={user?.profileImage} alt={user?.profileName} />
+        <CardText>
+          <ProfileName>{user?.profileName}</ProfileName>
+          <UserName>
+            {user?.userName} <small>Sent you a friend</small>
+          </UserName>
+        </CardText>
+        {showCountAndSeeAllButtons && (
+          <ButtonContainer>
+            <CountButton> + {count} Others</CountButton>
+            {seeAll && <SeeAllButton onClick={seeAll}>See All</SeeAllButton>}
+          </ButtonContainer>
+        )}
+        {showAcceptDeclineButtons && !showCountAndSeeAllButtons && (
+          <ButtonContainer>
+            <DeclineButton onClick={() => onDecline(user)}>
+              Decline
+            </DeclineButton>
+            <AcceptButton onClick={() => onAdd(user)}>Accept</AcceptButton>
+          </ButtonContainer>
+        )}
+      </CardContainer>
+    </Wrapper>
+  );
+};
+
+FriendRequestCard.propTypes = {
+  user: PropTypes.shape({
+    profileImage: PropTypes.string,
+    profileName: PropTypes.string,
+    userName: PropTypes.string,
+  }).isRequired,
+  count: PropTypes.number,
+  showCountAndSeeAllButtons: PropTypes.bool,
+  showAcceptDeclineButtons: PropTypes.bool,
+  onAdd: PropTypes.func,
+  onDecline: PropTypes.func,
+  seeAll: PropTypes.func,
+};
+
+FriendRequestCard.defaultProps = {
+  count: 0,
+  showCountAndSeeAllButtons: false,
+  showAcceptDeclineButtons: false,
+  onAdd: () => {},
+  onDecline: () => {},
+  seeAll: null,
+};
+
+export default FriendRequestCard;