l-min-components 0.2.0

package/src/components/subscriptionPreview/index.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ButtonComponent from "../button";
+import {CardContainer, HeaderContainer, PlanName, Date, ColumnContainer, ColumnsContainer, Value, Label } from "./style/style"
+
+
+
+const SubscribedCard = ({
+  planName,
+  currentPlan,
+  projectedPlan,
+  onUpgrade,
+}) => {
+  return (
+    <CardContainer>
+      <HeaderContainer>
+        <PlanName>{planName}</PlanName>
+        <ButtonComponent type="primary" text='Upgrade' onClick={onUpgrade}/>
+      </HeaderContainer>
+      <ColumnsContainer>
+        <ColumnContainer>
+          <Value className="current">{`$${currentPlan?.cost}`}</Value>
+
+          <div className="info">
+            <Label>Current Plan</Label>
+            <Date>Last subscription: {currentPlan?.date}</Date>
+          </div>
+        </ColumnContainer>
+        <ColumnContainer>
+          <Value className="projected">{`$${projectedPlan?.cost}`}</Value>
+
+          <div className="info">
+            <Label>Projected Plan</Label>
+            <Date>Next subscription: {projectedPlan?.date}</Date>
+          </div>
+        </ColumnContainer>
+      </ColumnsContainer>
+    </CardContainer>
+  );
+};
+
+SubscribedCard.propTypes = {
+  planName: PropTypes.string.isRequired,
+  currentPlan: PropTypes.shape({
+    amount: PropTypes.number.isRequired,
+    date: PropTypes.string.isRequired,
+  }).isRequired,
+  projectedPlan: PropTypes.shape({
+    amount: PropTypes.number.isRequired,
+    date: PropTypes.string.isRequired,
+  }).isRequired,
+  onUpgrade: PropTypes.func.isRequired,
+};
+
+export default SubscribedCard;

package/src/components/subscriptionPreview/style/style.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+
+export const CardContainer = styled.div`
+  background: rgba(0, 194, 194, 0.1);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.041);
+  border-radius: 30px;
+  padding: 20px 23px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  border-radius: 30px;
+
+  button {
+    box-shadow: 0px 10px 20px rgba(254, 191, 16, 0.25);
+    padding: 7px 54px;
+    font-size: 12px;
+  }
+`;
+
+export const PlanName = styled.p`
+  font-size: 27px;
+  margin: 0;
+  color: #e6ad0e;
+`;
+
+export const UpgradeButton = styled.button`
+  background-color: rgba(229, 173, 14, 1);
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  font-size: 16px;
+  border-radius: 11px;
+`;
+
+export const ColumnsContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 20px;
+`;
+
+export const ColumnContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  padding: 15px 25px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 15px;
+  align-items: center;
+  letter-spacing: 2%;
+  .info {
+    display: inherit;
+    flex-direction: column;
+  }
+`;
+
+export const Label = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(12, 13, 13, 1); ;
+`;
+
+export const Value = styled.span`
+  font-size: 29px;
+  font-weight: 700;
+  color: #0c0d0d;
+
+  &.current {
+    color: rgba(0, 153, 153, 1);
+  }
+
+  &.projected {
+    color: rgba(243, 155, 51, 1);
+  }
+`;
+
+export const Date = styled.span`
+  font-size: 12px;
+  color: rgba(74, 77, 77, 1);
+`;

package/src/components/successCard/index.jsx

@@ -0,0 +1,29 @@
+import avatar from "./assets/PartyingFace.png";
+import { Card } from "./index.styled";
+import ButtonComponent from "../button";
+
+/**
+ * @param {{
+ *  onClick: function,
+ *  style: CSSProperties,
+ * }} props - properties of graph Component
+ *
+ */
+const SuccessCard = (props) => {
+  return (
+    <Card style={props.style}>
+      <img src={avatar} alt="Partying Face" />
+      <h1>{props.title} </h1>
+      <h2>{props.subtitle} </h2>
+      <h6> {props.info} </h6>
+
+      <ButtonComponent
+        text="Proceed to Dashboard"
+        styles={{ marginLeft: "auto", marginRight: "auto" }}
+        onClick={props.onClick}
+      />
+    </Card>
+  );
+};
+
+export default SuccessCard;

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

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Card = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 80px;
+  margin: 0 auto;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 458px;
+  border-radius: 35px;
+  text-align: center;
+
+  img {
+    margin-bottom: 30px;
+    width: 166px;
+  }
+  h1 {
+    font-weight: 700;
+    font-size: 22px;
+  }
+
+  h2 {
+    font-weight: 700;
+    font-size: 22px;
+    margin-bottom: 10px;
+  }
+
+  h6 {
+    font-weight: 400;
+    font-size: 16px;
+    margin-bottom: 30px;
+  }
+`;

package/src/components/toggle button/index.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState, CSSProperties } from "react";
+import { ToggleBob, ToggleContainer } from "./styles";
+/**
+ * @param {{
+ * bobStyle: CSSProperties,
+ * value: boolean,
+ * containerStyle: CSSProperties,
+ * onClick: Function,
+ * }} props - properties of Toggle Button Component
+ */
+
+const ToggleButtonComponent = (props) => {
+  // active state
+
+  const [active, setActive] = useState(true);
+
+  // this useEffect runs to change the active state to whatever the user passes into the component as value
+
+  useEffect(() => {
+    props?.value && setActive(props?.value);
+  }, [props?.value]);
+
+  // useEffect that runs on state change and passes the state of active to the onClick param
+
+  useEffect(() => {
+    props.onClick && props?.onClick(active);
+  }, [active]);
+  return (
+    <ToggleContainer
+      style={{ ...props?.containerStyle }}
+      className={active ? "active" : ""}
+      onClick={() => {
+        setActive(!active);
+      }}
+    >
+      <ToggleBob
+        style={{ ...props?.bobStyle }}
+        className={active ? "active" : ""}
+      />
+    </ToggleContainer>
+  );
+};
+export default ToggleButtonComponent;

package/src/components/toggle button/styles.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ToggleContainer = styled.div`
+  width: 48px;
+  height: 24px;
+  background: #c6cccc;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  &.active {
+    background: rgba(254, 191, 16, 1);
+  }
+`;
+export const ToggleBob = styled.div`
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  position: relative;
+  transition: all 0.3s;
+  left: 3px;
+  background: rgba(223, 229, 229, 1);
+  &.active {
+    background: rgba(255, 255, 255, 1);
+    left: 27px;
+  }
+`;