l-min-components 0.2.0

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

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(0, 194, 194, 0.212);
+  padding: 10px;
+  border-radius: 20px;
+`;
+
+
+export const Header = styled.h3`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const CardContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  padding: ${p => p.multiple ? 0 : '10px'};
+
+  border-radius: ${p => p.multiple ? 0 : '10px'};
+`;
+
+export const ProfileImage = styled.img`
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin-right: 16px;
+`;
+
+export const CardText = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: auto;
+`;
+
+export const ProfileName = styled.span`
+  font-weight: bold;
+  margin-bottom: 4px;
+`;
+
+export const UserName = styled.span`
+  font-size: 14px;
+  color: #999;
+
+  span {
+    background: #febf10;
+    color: #fff;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 10px;
+    margin-left: 5x;
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+`;
+
+export const CountButton = styled.button`
+  background-color: rgba(255, 255, 255, 0.5);
+  border: none;
+  border-radius: 9.27391px;
+  color: #f7d00b;
+  cursor: pointer;
+  font-size: 16px;
+  margin-right: 8px;
+  padding: 10px 26px;
+   border-radius: 8px;
+`;
+
+export const SeeAllButton = styled.button`
+  background-color: #febf10;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 10px 26px;
+  border-radius: 8px;
+`;
+
+export const AcceptButton = styled.button`
+  background-color: #febf10;
+  border: none;
+
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 10px 26px;
+  border-radius: 8px;
+  margin-right: 8px;
+`;
+
+export const DeclineButton = styled.button`
+  background-color: #f95454;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 10px 26px;
+  border-radius: 8px;
+`;

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

@@ -0,0 +1,61 @@
+# Friend Request List Component
+
+The Friend Request List component is a reusable component in a React application that displays a list of friend requests.
+
+## Props
+
+The component accepts the following props:
+
+| Prop Name | Type | Description |
+| --- | --- | --- |
+| `friendRequests` | `array` | An array of objects representing friend requests. Each object should have the following properties: `id`, `profileImage`, `profileName`, and `userName`. |
+| `onAdd` | `function` | A callback function that is called when the "Accept" button is clicked on a friend request. The function should take one argument, which is the object representing the user who sent the friend request. |
+| `onDecline` | `function` | A callback function that is called when the "Decline" button is clicked on a friend request. The function should take one argument, which is the object representing the user who sent the friend request. |
+
+## Usage
+
+To use the Friend Request List component, import it into your React component and render it like this:
+
+```jsx
+import FriendRequestList from "./components/FriendRequestList";
+
+function App() {
+  const friendRequests = [
+    {
+      id: 1,
+      profileImage: "https://via.placeholder.com/50",
+      profileName: "John Doe",
+      userName: "@johndoe",
+    },
+    {
+      id: 2,
+      profileImage: "https://via.placeholder.com/50",
+      profileName: "Jane Smith",
+      userName: "@janesmith",
+    },
+    {
+      id: 3,
+      profileImage: "https://via.placeholder.com/50",
+      profileName: "Bob Johnson",
+      userName: "@bobjohnson",
+    },
+  ];
+
+  const onAdd = (user) => {
+    alert("Accepted: " + JSON.stringify(user));
+  };
+
+  const onDecline = (user) => {
+    alert("Declined: " + JSON.stringify(user));
+  };
+
+  return (
+    <div>
+      <FriendRequestList
+        friendRequests={friendRequests}
+        onAdd={onAdd}
+        onDecline={onDecline}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import FriendRequestCard from "../friendRequestCard";
+import { Container, Header, RequestList, SeeLessButton } from "./styles";
+import FriendImg from "../../../assets/friendrequest.png"
+
+const FriendRequestList = ({ friendRequests, onAdd, onDecline }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [numRequests, setNumRequests] = useState(1);
+
+  const handleSeeAllClick = () => {
+    setExpanded(true);
+    setNumRequests(friendRequests.length);
+  };
+
+  const handleCollapseClick = () => {
+    setExpanded(false);
+    setNumRequests(1);
+  };
+
+  return (
+    <Container>
+      <Header>
+        {expanded && <h2>Friend Requests</h2>}
+
+        {expanded && (
+          <SeeLessButton onClick={handleCollapseClick}>see less</SeeLessButton>
+        )}
+      </Header>
+      <RequestList>
+        {friendRequests.slice(0, numRequests).map((request, index) => (
+          <FriendRequestCard
+            key={index}
+            user={request}
+            seeAll={handleSeeAllClick}
+            onAdd={onAdd}
+            onDecline={onDecline}
+            count={
+              !expanded && numRequests >= 1 ? friendRequests.length - 1 : null
+            }
+            showAcceptDeclineButtons={
+              expanded || numRequests >= 1 || index === 0
+            }
+            showCountAndSeeAllButtons={!expanded && friendRequests.length > 1}
+          />
+        ))}
+      </RequestList>
+    </Container>
+  );
+};
+
+FriendRequestList.propTypes = {
+  friendRequests: PropTypes.array.isRequired,
+  onAdd: PropTypes.func.isRequired,
+  onDecline: PropTypes.func.isRequired,
+};
+
+export default FriendRequestList;

package/src/components/friendRequest/friendRequestList/styles/index.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  /* padding: 16px; */
+  border-radius: 15px;
+  /* background: rgba(0, 194, 194, 0.20); */
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  h2 {
+    font-size: 20px;
+    font-weight: bold;
+  }
+`;
+export const RequestList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const SeeLessButton = styled.button`
+  color: #FEBF10;
+  border: none;
+  background: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+`;

package/src/components/graph/graphData.jsx

@@ -0,0 +1,119 @@
+import { Line } from "react-chartjs-2";
+import { Chart as ChartJS } from "chart.js/auto";
+
+const GraphChart = ({ width, height, activeTab }) => {
+  const days = ["Mon", "Tues", "Wed", "Thur", "Fri", "Sat", "Sun"];
+  const weeks = ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6"];
+
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    // "Aug",
+    // "Sep",
+    // "Oct",
+    // "Nov",
+    // "Dec",
+  ];
+
+  const barChartData = {
+    labels: activeTab === 1 ? days : activeTab === 2 ? weeks : months,
+    datasets: [
+      {
+        label: "",
+        fill: false,
+        // backgroundColor: ,
+        borderColor: "rgba(33, 213, 155, 1)",
+        borderCapStyle: "round",
+        borderJoinStyle: "miter",
+        tension: 0.4,
+        pointBorderColor: "rgba(0, 194, 194, 1)",
+        pointBackgroundColor: "#fff",
+        pointBorderWidth: 0.5,
+        pointHoverRadius: 10,
+        pointHoverBackgroundColor: "rgba(0, 194, 194, 1)",
+        pointHoverBorderColor: "rgba(255, 255, 255, 0.8)",
+        pointHoverBorderWidth: 8,
+        pointRadius: 0,
+        pointHitRadius: 10,
+        data: [200, 180, 300, 250, 450, 150, 300],
+      },
+    ],
+  };
+
+  const barChartOptions = {
+    responsive: true,
+    layout: {
+      padding: 10,
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        usePointStyle: true,
+        backgroundColor: "#00C2C2",
+        bodyColor: "rgba(0, 0, 0, 1)",
+        titleColor: "rgba(0, 0, 0, 0.6)",
+        titleAlign: "center",
+        bodyAlign: "center",
+        footerAlign: "center",
+        yAlign: "bottom",
+        caretPadding: 15,
+        boxWidth: 100,
+        displayColors: false,
+        titleMarginBottom: 10,
+        titleSpacing: 15,
+        callbacks: {},
+      },
+    },
+    scales: {
+      x: {
+        // type: "category",
+        ticks: {
+          color: "rgba(173, 178, 178, 1)",
+          fontSize: 12,
+        },
+        grid: {
+          lineWidth: 1,
+          display: false,
+        },
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        grid: {
+          display: true,
+        },
+        ticks: {
+          color: "rgba(173, 178, 178, 1)",
+          fontSize: 12,
+          display: false,
+        },
+      },
+    },
+
+    animation: {
+      easing: "linear",
+
+      y: {
+        duration: 2000,
+        from: 500,
+      },
+    },
+  };
+
+  return (
+    <Line
+      data={barChartData}
+      options={barChartOptions}
+      height={height}
+      width={width}
+    />
+  );
+};
+export default GraphChart;

package/src/components/graph/index.jsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import {
+  GraphCard,
+  GraphCardBody,
+  GraphCardFooter,
+  GraphCardHeader,
+} from "./index.styled";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import moment from "moment";
+import { CalendarIcon } from "../../assets/svg/calendar";
+import { DownloadIcon } from "../../assets/svg/download";
+import GraphChart from "./graphData";
+
+/**
+ * @param {{
+ *  onClick: function,
+ *  style: CSSProperties,
+ * }} props - properties of Component
+ *
+ */
+const GraphComponent = (props) => {
+  const [activeTab, setActiveTab] = useState(1);
+  const [dateRange, setDateRange] = useState({
+    startDate: new Date(),
+    endDate: new Date(),
+  });
+
+  return (
+    <GraphCard style={props.style}>
+      <GraphCardHeader>
+        <div className="time-calc-wrapper">
+          <div className="total-time">
+            <h6> Total time (sec)</h6>
+            <h3> {props.totalTime}</h3>
+          </div>
+          <div className="projected-time">
+            <h6> Projected Time (sec) </h6>
+            <h3> {props.projectedTime} </h3>
+          </div>
+        </div>
+        <div className="date-wrapper">
+          <div className="datepicker__wrapper">
+            <DatePicker
+              selected={dateRange.startDate}
+              startDate={dateRange.startDate}
+              dateFormat="d MMM yyyy"
+              onChange={(dates) =>
+                setDateRange({
+                  ...dateRange,
+                  startDate: dates,
+                })
+              }
+              calendarClassName="datepicker_style"
+            />
+            <CalendarIcon />
+          </div>
+          <span> to </span>
+          <div className="datepicker__wrapper">
+            <DatePicker
+              selected={dateRange.endDate}
+              endDate={dateRange.endDate}
+              dateFormat="d MMM yyyy"
+              onChange={(dates) =>
+                setDateRange({
+                  ...dateRange,
+                  endDate: dates,
+                })
+              }
+              calendarClassName="datepicker_style"
+            />
+            <CalendarIcon />
+          </div>
+
+          <div className="download__wrapper">
+            <DownloadIcon />
+          </div>
+        </div>
+      </GraphCardHeader>
+
+      <GraphCardBody>
+        <GraphChart width={650} height={250} activeTab={activeTab} />
+      </GraphCardBody>
+
+      <GraphCardFooter>
+        <span
+          className={activeTab === 1 ? "active" : ""}
+          onClick={() => setActiveTab(1)}
+        >
+          D
+        </span>
+
+        <span
+          className={activeTab === 2 ? "active" : ""}
+          onClick={() => setActiveTab(2)}
+        >
+          W
+        </span>
+
+        <span
+          className={activeTab === 3 ? "active" : ""}
+          onClick={() => setActiveTab(3)}
+        >
+          M
+        </span>
+      </GraphCardFooter>
+    </GraphCard>
+  );
+};
+
+export default GraphComponent;