l-min-components 0.2.0

package/src/components/banner/styles/index.jsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import { FaArrowRight } from "react-icons/fa";
+import BannerImg from "../assets/Vector19.png"
+
+export const BannerWrapper = styled.div`
+  position: relative;
+  max-width: 232px;
+  border-radius: 36px;
+  padding: 30px 16px 21px;
+  overflow: hidden;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
+  text-align: center;
+  color: #23ffc8;
+  background-image: url(${BannerImg});
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: contain;
+  border:  1px solid #C6CCCC;
+
+`;
+
+export const BannerTitle = styled.h1`
+  font-size: 32px;
+  margin: 0;
+  font-weight: 800;
+  line-height: 42px;
+  color: #00C2C2;
+
+`;
+
+export const BannerSubtitle = styled.p`
+  font-size: 18px;
+  margin: 29px 0;
+  color: #00C2C2;
+  font-weight: 600;
+`;
+
+export const BannerImage = styled.img`
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: -5px;
+  margin-top: 22px;
+  opacity: 2; 
+   display: block;
+   opacity: 1.0;
+`;
+
+export const BannerCTA = styled.button`
+  background-color: #ffbf1e;
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 10px;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  margin: auto 0 30px;
+  opacity: 1.0;
+
+  &:hover {
+    background-color: #0062cc;
+    cursor: pointer;
+  }
+`;
+
+export const ArrowIcon = styled(FaArrowRight)`
+  margin-left: 0.5rem;
+`;
+
+export const AbsoluteSVG = styled.svg`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+`;

package/src/components/bar/styles.css

@@ -0,0 +1,19 @@
+.color-bar {
+    height: 50px;
+    width: 100%;
+  }
+  
+  .color-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+  
+  label {
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 5px;
+  }
+  

package/src/components/button/index.jsx

@@ -0,0 +1,329 @@
+import { useCallback, CSSProperties } from "react";
+import styled from "styled-components";
+/**
+ * @param {{
+ *  type?: ("primary" | "secondary" | "tertiary"),
+ *  text: string,
+ *  disabled: boolean,
+ *  onClick: Function,
+ *  styles: CSSProperties,
+ *  icon: {
+ *      jsx: typeof HTMLElement,
+ *      left: boolean,
+ *      right: boolean,
+ *      width: number,
+ *      height: number,
+ *      stroke: string
+ *  }
+ * }} props - properties of Button Component
+ *
+ */
+const ButtonComponent = (props) => {
+  const handleClick = useCallback(() => {
+    props.onClick && props.onClick();
+  }, []);
+  // console.log(props);
+  switch (props.type) {
+    case "primary":
+      return (
+        <Button
+          disabled={props.disabled}
+          onClick={handleClick}
+          style={props.styles}>
+          {props.icon?.left && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.left && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+          {props.text ?? "Text"}
+          {props.icon?.right && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.right && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+        </Button>
+      );
+    case "secondary":
+      return (
+        <SecondaryButton
+          disabled={props.disabled}
+          onClick={handleClick}
+          style={props.styles}>
+          {props.icon?.left && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.left && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+          {props.text ?? "Text"}
+          {props.icon?.right && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.right && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+        </SecondaryButton>
+      );
+    case "tertiary":
+      return (
+        <TertiaryButton
+          disabled={props.disabled}
+          onClick={handleClick}
+          style={props.styles}>
+          {props.icon?.left && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.left && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+          {props.text ?? "Text"}
+          {props.icon?.right && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.right && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+        </TertiaryButton>
+      );
+    default:
+      return (
+        <Button
+          disabled={props.disabled}
+          onClick={handleClick}
+          style={props.styles}>
+          {props.icon?.left && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.left && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+          {props.text ?? "Text"}
+          {props.icon?.right && props.icon.jsx ? (
+            <props.icon.jsx
+              {...{
+                width: props.icon.width,
+                height: props.icon.height,
+                stroke: props.icon.stroke,
+              }}
+            />
+          ) : (
+            props.icon?.right && (
+              <TestIcon
+                {...{
+                  width: props.icon.width,
+                  height: props.icon.height,
+                  stroke: props.icon.stroke,
+                }}
+              />
+            )
+          )}
+        </Button>
+      );
+  }
+};
+export default ButtonComponent;
+
+const Button = styled.button`
+  padding: 9px 40px;
+  font-size: 16px;
+  font-weight: 700;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background-color: #febf10;
+  color: #ffffff;
+  transition: 0.5s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  &:hover {
+    background-color: #e5ad0e;
+    border-color: transparent;
+  }
+  &:disabled {
+    background-color: #c6cccc;
+    cursor: not-allowed;
+  }
+  & svg {
+    & path {
+      stroke: white;
+    }
+  }
+`;
+
+const SecondaryButton = styled(Button)`
+  background-color: #ffffff;
+  color: #febf10;
+  border: 1px solid #febf10;
+  &:hover {
+    background-color: #ffffff;
+    color: #e5ad0e;
+    border-color: #e5ad0e;
+    & svg {
+      & path {
+        stroke: #e5ad0e;
+      }
+    }
+  }
+  &:disabled {
+    background-color: #ffffff;
+    color: #c6cccc;
+    border-color: #c6cccc;
+    & svg {
+      & path {
+        stroke: #c6cccc;
+      }
+    }
+  }
+  & svg {
+    & path {
+      stroke: #febf10;
+    }
+  }
+`;
+
+const TertiaryButton = styled(Button)`
+  &:hover {
+    background-color: #ffffff;
+    color: #febf10;
+    border: 1px solid #febf10;
+    & svg {
+      & path {
+        stroke: #febf10;
+      }
+    }
+  }
+  &:disabled {
+    border-color: #7c8080;
+    color: #7c8080;
+    background-color: #ffffff;
+    & svg {
+      & path {
+        stroke: #7c8080;
+      }
+    }
+  }
+`;
+
+const TestIcon = ({ stroke, ...props }) => {
+  return (
+    <Svg xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+const Svg = styled.svg.attrs((props) => {
+  return {
+    width: props.width ?? 24,
+    height: props.height ?? 24,
+    fill: props.fill ?? "none",
+  };
+})`
+  transition: 0.5s;
+`;

package/src/components/button/socialBtn.jsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+const SocialBtn = ({ customStyle, onClick = () => {}, children }) => {
+  return (
+    <BtnBody style={customStyle} onClick={onClick}>
+      {children ?? <Fb />}
+    </BtnBody>
+  );
+};
+
+const BtnBody = styled.button`
+  background-color: rgba(33, 150, 243, 0.1);
+  max-width: 159.5px;
+  padding: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  border: 0px;
+  cursor: pointer;
+`;
+
+const Fb = ({ width, height }) => {
+  return (
+    <svg
+      width={width ?? "19"}
+      height={height ?? "19"}
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.6122 12.8524C16.6122 15.5781 14.9872 17.203 12.2615 17.203H11.3704C10.9586 17.203 10.6216 16.866 10.6216 16.4542V12.1335C10.6216 11.9313 10.7863 11.7591 10.9885 11.7591L12.3065 11.7366C12.4113 11.7291 12.5012 11.6542 12.5236 11.5494L12.7857 10.1192C12.8082 9.98437 12.7033 9.85707 12.5611 9.85707L10.9661 9.87953C10.7564 9.87953 10.5917 9.7148 10.5842 9.51261L10.5542 7.67799C10.5542 7.55818 10.6516 7.45335 10.7789 7.45335L12.576 7.42339C12.7033 7.42339 12.8007 7.32605 12.8007 7.19875L12.7707 5.40156C12.7707 5.27426 12.6734 5.17692 12.5461 5.17692L10.5243 5.20688C9.28122 5.22935 8.29278 6.24774 8.31525 7.49078L8.35268 9.55005C8.36017 9.75972 8.19544 9.92446 7.98576 9.93195L7.08717 9.94692C6.95987 9.94692 6.86253 10.0443 6.86253 10.1716L6.88499 11.5943C6.88499 11.7216 6.98233 11.819 7.10963 11.819L8.00823 11.804C8.2179 11.804 8.38262 11.9687 8.39011 12.1709L8.4575 16.4392C8.46499 16.8586 8.12802 17.203 7.70868 17.203H5.9864C3.26068 17.203 1.63574 15.5781 1.63574 12.8449V6.57722C1.63574 3.85151 3.26068 2.22656 5.9864 2.22656H12.2615C14.9872 2.22656 16.6122 3.85151 16.6122 6.57722V12.8524Z"
+        fill="#2196F3"
+      />
+    </svg>
+  );
+};
+export default SocialBtn;

package/src/components/calender/input.jsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useState } from "react";
+import {
+  MdDateRange,
+  MdKeyboardArrowLeft,
+  MdKeyboardArrowRight,
+} from "react-icons/md";
+import {
+  CalendarBody,
+  CalendarContainer,
+  CalendarDayCell,
+  CalendarHeader,
+  CalendarIcon,
+  DateInput,
+  DateInputContainer,
+} from "./styles/input";
+
+/**
+ * @param {{
+*  size: string,
+*  value: string | number,
+*  onChange: Function,
+*  selected: string,
+* }} props - properties of Header Component
+*
+*/
+
+const Calender = ({ size, value, color, active, icon, onChange }) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(value);
+
+  const handleDateSelect = (date) => {
+    setSelectedDate(date);
+    onChange(date);
+    setShowCalendar(false);
+  };
+
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+  const renderCalendar = () => {
+    const today = new Date();
+    const year = selectedDate
+      ? selectedDate.getFullYear()
+      : today.getFullYear();
+    const month = selectedDate ? selectedDate.getMonth() : today.getMonth();
+
+    const firstDayOfMonth = new Date(year, month, 1);
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    const daysInMonth = lastDayOfMonth.getDate();
+    const startDayOfWeek = firstDayOfMonth.getDay();
+
+    const calendarDays = [];
+
+    for (let i = 0; i < startDayOfWeek; i++) {
+      calendarDays.push(null);
+    }
+
+    for (let i = 1; i <= daysInMonth; i++) {
+      calendarDays.push(new Date(year, month, i));
+    }
+
+    const handlePrevMonthClick = () => {
+      setSelectedDate(new Date(year, month - 1, 1));
+    };
+
+    const handleNextMonthClick = () => {
+      setSelectedDate(new Date(year, month + 1, 1));
+    };
+
+    return (
+      <CalendarContainer>
+        <CalendarHeader>
+          <div>
+            {monthNames[month]} {year}
+          </div>
+          <div className="buttons">
+            <button onClick={handlePrevMonthClick}>
+              <MdKeyboardArrowLeft />
+            </button>
+            <button onClick={handleNextMonthClick}>
+              <MdKeyboardArrowRight />
+            </button>
+          </div>
+        </CalendarHeader>
+        <CalendarBody>
+          {weekdays.map((day) => (
+            <CalendarDayCell className="weekdays" key={day}>
+              {day}
+            </CalendarDayCell>
+          ))}
+          {calendarDays.map((date) =>
+            date ? (
+              <CalendarDayCell
+                key={date}
+                onClick={() => handleDateSelect(date)}
+                color={color}
+                selected={
+                  selectedDate &&
+                  date.toDateString() === selectedDate.toDateString()
+                }
+              >
+                {date.getDate()}
+              </CalendarDayCell>
+            ) : (
+              <CalendarDayCell
+                color={color}
+                key={Math.random()}
+              ></CalendarDayCell>
+            )
+          )}
+        </CalendarBody>
+      </CalendarContainer>
+    );
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === "ArrowLeft") {
+      setSelectedDate(
+        new Date(
+          selectedDate.getFullYear(),
+          selectedDate.getMonth(),
+          selectedDate.getDate() - 1
+        )
+      );
+    } else if (e.key === "ArrowRight") {
+      setSelectedDate(
+        new Date(
+          selectedDate.getFullYear(),
+          selectedDate.getMonth(),
+          selectedDate.getDate() + 1
+        )
+      );
+    } else if (e.key === "ArrowUp") {
+      setSelectedDate(
+        new Date(
+          selectedDate.getFullYear(),
+          selectedDate.getMonth(),
+          selectedDate.getDate() - 7
+        )
+      );
+    } else if (e.key === "ArrowDown") {
+      setSelectedDate(
+        new Date(
+          selectedDate.getFullYear(),
+          selectedDate.getMonth(),
+          selectedDate.getDate() + 7
+        )
+      );
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  return (
+    <DateInputContainer size={size}>
+      <DateInput
+        size={size}
+        value={
+          selectedDate
+            ? `${selectedDate.getDate()} ${monthNames[
+                selectedDate.getMonth()
+              ].slice(0, 3)} ${selectedDate.getFullYear()}`
+            : ""
+        }
+        color={color}
+        active={active}
+        onFocus={() => setShowCalendar(true)}
+        onBlur={() => setShowCalendar(false)}
+        onKeyDown={handleKeyPress} // add this
+      />
+
+      <CalendarIcon
+        color={color}
+        onClick={() => setShowCalendar(!showCalendar)}
+      >
+        {icon ? icon : <MdDateRange />}
+      </CalendarIcon>
+      {showCalendar && renderCalendar()}
+    </DateInputContainer>
+  );
+};
+
+export default Calender;