Merge pull request #7 from LucasSantus/develop

Develop

Author: lucassantus

src/components/Icons/IconPolygon.tsx

@@ -0,0 +1,27 @@
+interface IconPolygonProps extends React.ComponentPropsWithoutRef<"svg"> {}
+
+export const IconPolygon = (props: IconPolygonProps) => (
+  <svg
+    width={13}
+    height={12}
+    viewBox="0 0 13 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M6.5.5l6.495 11.25H.005L6.5.5z" fill="currentColor" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_201_16"
+        x1={6.5}
+        y1={0.5}
+        x2={6.5}
+        y2={15.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="currentColor" />
+        <stop offset={1} stopColor="currentColor" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

src/components/Sales/components/InfoOfTheDay.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+interface IInfoOfTheDayProps {
+  icon: ReactNode;
+  dailySale: string;
+  weekday: string;
+}
+
+export const InfoOfTheDay: React.FC<IInfoOfTheDayProps> = ({
+  icon,
+  dailySale,
+  weekday,
+}) => {
+  return (
+    <>
+      <div className="flex items-center gap-1">
+        {icon}
+        <span className="text-white font-inter text-sm font-medium">
+          {dailySale}
+        </span>
+      </div>
+
+      <span className="text-white font-inter text-2xl font-medium">
+        {weekday}
+      </span>
+    </>
+  );
+};

src/components/Sales/index.tsx

@@ -1,9 +1,37 @@
 import { Card } from "../Card";
+import { IconPolygon } from "../Icons/IconPolygon";
+import { SimpleGraph } from "../SimpleGraph";
+import { InfoOfTheDay } from "./components/InfoOfTheDay";
 
 export const Sales: React.FC = () => {
   return (
     <Card>
-      <span className="text-white">Vendas por dia da semana</span>
+      <div className="px-12 py-7">
+        <span className="text-white font-inter text-2xl">
+          Vendas por dia da semana
+        </span>
+        <div className="grid grid-cols-2 pt-8">
+          <div className="flex flex-col gap-2">
+            <InfoOfTheDay
+              dailySale="Dia com mais vendas"
+              weekday="quarta-feira"
+              icon={<IconPolygon className="text-green-700 shadow-sm" />}
+            />
+            <div className="pt-7" />
+            <InfoOfTheDay
+              dailySale="Dia com menos vendas"
+              weekday="domingo"
+              icon={
+                <IconPolygon className="text-red-700 rotate-180 shadow-sm" />
+              }
+            />
+          </div>
+
+          <div>
+            <SimpleGraph />
+          </div>
+        </div>
+      </div>
     </Card>
   );
 };

src/components/SimpleGraph/index.tsx

@@ -0,0 +1,80 @@
+import classNames from "classnames";
+
+interface IDaysType {
+  day: string;
+  value: number;
+}
+
+const DAYS: IDaysType[] = [
+  {
+    day: "dom",
+    value: 2,
+  },
+  {
+    day: "seg",
+    value: 5,
+  },
+  {
+    day: "ter",
+    value: 4,
+  },
+  {
+    day: "qua",
+    value: 6,
+  },
+  {
+    day: "qui",
+    value: 5,
+  },
+  {
+    day: "sex",
+    value: 4.5,
+  },
+  {
+    day: "sab",
+    value: 3,
+  },
+];
+
+export const SimpleGraph: React.FC = () => {
+  const calcularValor = (value: number) => {
+    let valueTotal = value * 10;
+
+    if (valueTotal < 0) return 1;
+    else if (valueTotal > 140) return 140;
+
+    return valueTotal;
+  };
+
+  return (
+    <div className="h-full">
+      <div className="flex justify-between items-end h-full">
+        {DAYS.map((item) => {
+          const value = calcularValor(item.value);
+
+          const divStyle = {
+            height: `${value}px`,
+          };
+
+          return (
+            <div
+              key={item.day}
+              className="flex flex-col justify-center items-center"
+            >
+              <div
+                className={classNames(
+                  // height,
+                  "bg-custom-cyan-600 w-[15px] rounded-full"
+                )}
+                style={divStyle}
+              />
+              <span className="font-inter font-medium text-sm text-white">
+                {item.day}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

tailwind.config.cjs

@@ -16,6 +16,9 @@ module.exports = {
           green: {
             500: "#81FBB8",
           },
+          cyan: {
+            600: "#90F7EC",
+          },
         },
       },
       fontFamily: {