l-min-components 0.2.0

package/src/components/calender/styles/input.jsx

@@ -0,0 +1,127 @@
+import styled from "styled-components";
+
+export const DateInputContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: ${({ size }) => {
+    switch (size) {
+      case "sm":
+        return "120px";
+      case "md":
+        return "140px";
+      case "lg":
+        return "270px";
+      default:
+        return "120px";
+    }
+  }};
+`;
+
+export const DateInput = styled.input`
+  font-size: ${({ size }) => {
+    switch (size) {
+      case "sm":
+        return "11px";
+      case "md":
+        return "16px";
+      case "lg":
+        return "18px";
+      default:
+        return "11px";
+    }
+  }};
+  color: rgba(202, 201, 201, 0.335);
+  padding: 10px;
+  border: 3px solid
+    ${({ active }) =>
+      active ? "rgba(59, 59, 59, 0.282)" : "rgba(202, 201, 201, 0.335)"};
+  border-radius: 8px;
+  background-color: transparent;
+  outline: none;
+  width: 100%;
+  &:focus {
+    border: 2px solid rgba(59, 59, 59, 0.282);
+  }
+`;
+
+export const CalendarIcon = styled.span`
+  position: absolute;
+  right: 10px;
+  top: 55%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  color: #000;
+  cursor: pointer;
+`;
+
+export const CalendarContainer = styled.div`
+  position: absolute;
+  top: 110%;
+  left: 0;
+  z-index: 1;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid grey;
+  border-radius: 10px;
+  padding: 20px;
+
+  .buttons {
+    display: flex;
+    gap: 2px;
+    button {
+      background: rgba(204, 204, 204, 0.342);
+      border: 1px solid rgba(204, 204, 204, 0.342);
+      outline: none;
+      border-radius: 4px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`;
+
+export const CalendarHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+  font-size: 18px;
+
+`;
+
+export const CalendarBody = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 30px;
+  padding-top: 10px;
+`;
+
+export const CalendarDayCell = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: ${({ selected }) => (selected ? '13px' : "12px")};
+  font-weight: ${({ selected }) => (selected ? '700' : "500")};
+  gap: 3px;
+  border-radius: 5px;
+  padding: 7px 10px;
+  cursor: pointer;
+  color: ${({ selected }) => (selected ? '#fff' : "black")};
+  background-color: ${({ selected, color }) =>
+    selected ? "#00C2C2": "white"};
+
+    &.weekdays {
+        font-weight: 700;
+        font-size: 13px;
+
+    }
+
+  &:hover {
+    color: #0094BA;
+    background-color: rgba(0, 148, 186, 0.04);
+  }
+
+  
+`;

package/src/components/checkBoxes/checkbox/doc.md

@@ -0,0 +1,36 @@
+## Checkbox Component
+
+A customizable Checkbox component.
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | string | | The label to display next to the checkbox |
+| color | string | `#007bff` | The color of the checkbox when checked |
+| defaultValue | boolean | `false` | The default checked state of the checkbox |
+| onChange | function | | A function to be called when the checkbox is checked or unchecked |
+| ...props | any | | Any additional props to be passed to the component |
+
+### Example Usage
+
+```jsx
+import React, { useState } from "react";
+import Checkbox from "./Checkbox";
+
+const MyComponent = () => {
+  const [checked, setChecked] = useState(false);
+
+  const handleChange = (newValue) => {
+    setChecked(newValue);
+  };
+
+  return (
+    <Checkbox
+      label="Check me out!"
+      color="#ff9900"
+      defaultValue={checked}
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/checkBoxes/checkbox/index.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { BsCheck } from "react-icons/bs";
+import { PropTypes } from 'prop-types';
+import { CheckboxControl, CheckboxInput, CheckboxLabel, CheckboxWrapper } from "./styles";
+
+
+const Checkbox = ({
+  label,
+  color,
+  defaultValue,
+  onChange,
+  size,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(defaultValue);
+
+  const handleChange = (event) => {
+    const newValue = event.target.checked;
+    setChecked(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <CheckboxWrapper {...props}>
+      <CheckboxInput checked={checked} onChange={handleChange} />
+      <CheckboxControl 
+          checked={checked} 
+          color={color}  
+          size={size}
+          >
+        <BsCheck />
+      </CheckboxControl>
+      <CheckboxLabel checked={checked} color={color}>
+        {label}
+      </CheckboxLabel>
+    </CheckboxWrapper>
+  );
+};
+
+Checkbox.propTypes = {
+  label: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  onChange: PropTypes.func,
+  defaultValue: PropTypes.bool,
+
+};
+
+Checkbox.defaultProps = {
+  defaultValue: false,
+};
+
+export default Checkbox;

package/src/components/checkBoxes/checkbox/styles/index.jsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+// export const sizes = {
+//   xs: {
+//     height: "4px",
+//     width: "4px",
+//   },
+//   sm: {
+//     height: "8px",
+//     width: "8px",
+//   },
+//   md: {
+//     height: "14px",
+//     width: "14px",
+//   },
+//   lg: {
+//     height: "16px",
+//     width: "16px",
+//   },
+//   xl: {
+//     height: "20px",
+//     width: "20px",
+//   },
+// };
+
+export const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+export const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+`;
+
+export const CheckboxControl = styled.span`
+  position: relative;
+  display: inline-block;
+  height: ${(props) => (props.size || "24px")};
+  width: ${(props) => (props.size || "24px")};
+  border: 2px solid
+    ${(props) => (props.checked ? props.color : "rgba(159, 159, 159, 0.365)")};
+  background-color: ${(props) => (props.checked ? props.color : "transparent")};
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+
+  & svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: ${(props) => (props.checked ? "#fff" : "transparent")};
+    transition: all 0.2s ease-in-out;
+  }
+`;
+
+export const CheckboxLabel = styled.span`
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  color: ${(props) => (props.checked ? props.color : "initial")};
+`;

package/src/components/checkBoxes/checkboxGroup/doc.md

@@ -0,0 +1,55 @@
+# Checkbox Group Component
+
+The Checkbox Group component is a reusable user interface element that allows users to select one or more options from a list of choices. The component should be clickable and its state should change on click. Additionally, the component should be able to return its values on click, and we should be able to pass in default states for these checkboxes.
+
+## Props
+
+| Name          | Type     | Default | Description                                                       |
+|---------------|----------|---------|-------------------------------------------------------------------|
+| `options`     | `array`  | `[]`    | An array of objects representing the available options. Each object should have a label and value property.            |
+| `selectedValues`       | `string` | `"#000"` |	An array of strings representing the currently selected values.          |
+| `color`| `string`   | `#000` | A color string to be passed as a prop to the Checkbox components.                              |
+| `onChange`    | `func`   | `null`  | A callback function that is called when the selection changes. It receives the new selected values as an argument.  |
+
+## Options Object
+
+The `options` prop should be an array of objects representing each checkbox option. Each object should have the following properties:
+
+| Name      | Type      | Description                          |
+|-----------|-----------|--------------------------------------|
+| `value`   | `string`  | The value of the checkbox.            |
+| `label`   | `string`  | The label displayed next to the checkbox. |
+
+## Example Usage
+
+```jsx
+import React, { useState } from 'react';
+import CheckboxGroup from './CheckboxGroup';
+
+const options = [
+  { label: "Option 1", value: "option1" },
+  { label: "Option 2", value: "option2" },
+  { label: "Option 3", value: "option3" },
+];
+
+const App = () => {
+  const [selectedValues, setSelectedValues] = useState([]);
+
+  const handleCheckboxGroupChange = (newSelectedValues) => {
+    setSelectedValues(newSelectedValues);
+  };
+
+  return (
+    <div>
+      <CheckboxGroup
+        color="#ffaa33"
+        options={options}
+        selectedValues={selectedValues}
+        onChange={handleCheckboxGroupChange}
+      />
+      <div>Selected values: {JSON.stringify(selectedValues)}</div>
+    </div>
+  );
+};
+
+export default App;

package/src/components/checkBoxes/checkboxGroup/index.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Checkbox from "../checkbox";
+import { Container } from "./styles";
+
+const CheckboxGroup = ({ color, options, selectedValues, onChange, size, }) => {
+  const handleChange = (value) => {
+    let newSelectedValues = [...selectedValues];
+    if (newSelectedValues.includes(value)) {
+      newSelectedValues = newSelectedValues.filter((v) => v !== value);
+    } else {
+      newSelectedValues.push(value);
+    }
+    onChange(newSelectedValues);
+  };
+
+  return (
+    <Container>
+      {options.map((option) => (
+        <Checkbox
+          key={option.value}
+          label={option.label}
+          color={color}
+          value={option.value}
+          size={size}         
+          onChange={() => handleChange(option.value)}
+          checked={selectedValues.includes(option.value)}
+        />
+      ))}
+    </Container>
+  );
+};
+
+CheckboxGroup.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      color: PropTypes.string,
+      size: PropTypes.string,
+    })
+  ).isRequired,
+  selectedValues: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CheckboxGroup;

package/src/components/checkBoxes/checkboxGroup/styles/index.jsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+display: flex;
+flex-direction: column;
+gap: 10px;
+`

package/src/components/course/courseList/index.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import CourseCard from "../coursecard";
+import { CourseListWrapper } from "./styles";
+
+import PropTypes from "prop-types";
+
+
+const CourseList = ({courses}) => {
+  return (
+    <CourseListWrapper>
+      {courses.map((course) => (
+        <CourseCard key={course.id} course={course} />
+      ))}
+    </CourseListWrapper>
+  );
+};
+
+CourseList.propTypes = {
+  courses: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      title: PropTypes.string.isRequired,
+      endDate: PropTypes.string.isRequired,
+      rating: PropTypes.number.isRequired,
+      learnersCount: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+};
+
+export default CourseList;
+
+

package/src/components/course/courseList/styles/index.jsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const CourseListWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+`;

package/src/components/course/coursecard/index.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CardWrapper,
+  EndDate,
+  LearnersCount,
+  Rates,
+  Rating,
+  StarIcon,
+  Title,
+} from "./styles";
+
+const formatLearnersCount = (count) => {
+  if (count >= 1000) {
+    return `${Math.floor(count / 1000)}k`;
+  }  else {
+    return count.toString();
+  }
+};
+
+
+const CourseCard = ({ course }) => {
+  const { id, title, endDate, rating, learnersCount } = course;
+
+  return (
+    <CardWrapper to={`/courses/${id}`}>
+      <Title>{title}</Title>
+      <EndDate>
+        <span>Course Ends: </span>
+        {endDate}
+      </EndDate>
+
+      <Rates>
+        <Rating>
+          <StarIcon />
+          {rating}
+        </Rating>
+        <div className="divider"></div>
+        <LearnersCount>
+          {formatLearnersCount(learnersCount)} <span>learners</span>{" "}
+        </LearnersCount>
+      </Rates>
+    </CardWrapper>
+  );
+};
+
+CourseCard.propTypes = {
+  course: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    endDate: PropTypes.string.isRequired,
+    rating: PropTypes.number.isRequired,
+    learnersCount: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default CourseCard;

package/src/components/course/coursecard/styles/index.jsx

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import { BsStarFill } from "react-icons/bs";
+import { NavLink } from "react-router-dom";
+
+export const CardWrapper = styled(NavLink)`
+text-decoration: none;
+color: #333;
+  width: 280px;
+  height: auto;
+  gap: 20px;
+ 
+  border: 5px solid #ffffff;
+  background: #fff;
+  border-radius: 25px;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: 0.3s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    border: 5px solid #f5d508;
+  }
+`;
+
+export const Title = styled.h3`
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  margin: 0;
+`;
+
+export const EndDate = styled.p`
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0;
+
+  span {
+    color: hsla(0, 0%, 45.09803921568628%, 0.52);
+  }
+`;
+
+export const Rating = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const Rates = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 18px;
+  font-weight: 300;
+
+  .divider {
+    width: 3px;
+    height: 3px;
+    border-radius: 3px;
+    background: #000;
+  }
+`;
+
+export const StarIcon = styled(BsStarFill)`
+  color: #ffc107;
+  margin-right: 5px;
+`;
+
+export const LearnersCount = styled.p`
+  margin: 0;
+`;

package/src/components/developerAPIdocs/assets/icons.jsx

@@ -0,0 +1,46 @@
+export const ArrowIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "5"}
+    height={height || "10"}
+    viewBox="0 0 5 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 10L5 5L0 0V10Z" fill="#323232" />
+  </svg>
+);
+
+export const FolderOpenIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 19C3.89543 19 3 18.1046 3 17V7C3 5.89543 3.89543 5 5 5H9L11 7H15C16.1046 7 17 7.89543 17 9V10M5 19H19C20.1046 19 21 18.1046 21 17V12C21 10.8954 20.1046 10 19 10H9C7.89543 10 7 10.8954 7 12V17C7 18.1046 6.10457 19 5 19Z"
+      stroke="#009999"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+);
+
+export const FolderCloseIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z"
+      stroke="#009999"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);