feat(web): header-and-stat-ui

Author: tractorss

web/src/assets/svgs/icons/dollar.svg

@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import { landscapeStyle } from "styles/landscapeStyle";
+import styled, { useTheme, css } from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
+import { Theme } from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  max-width: 196px;
+  align-items: center;
+  gap: 8px;
+
+  ${landscapeStyle(
+    () => css`
+      margin-bottom: ${responsiveSize(16, 30)};
+    `
+  )}
+`;
+
+const SVGContainer = styled.div<{ iconColor: string; backgroundColor: string }>`
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ iconColor }) => iconColor};
+    height: 21px;
+    width: 21px;
+  }
+`;
+
+const TextContainer = styled.div`
+  h1 {
+    margin: 0;
+  }
+`;
+
+const SubtextLabel = styled.label`
+  font-size: 12px;
+`;
+
+const COLORS: Record<string, Array<keyof Theme>> = {
+  green: ["success", "successLight"],
+  blue: ["primaryBlue", "mediumBlue"],
+  purple: ["secondaryPurple", "mediumPurple"],
+  orange: ["warning", "warningLight"],
+};
+
+export type IColors = keyof typeof COLORS;
+
+interface IStatDisplay {
+  title: string;
+  text: string | React.ReactNode;
+  subtext: string | React.ReactNode;
+  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  color: IColors;
+}
+
+const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
+  const theme = useTheme();
+
+  const [iconColor, backgroundColor] = useMemo(() => {
+    return COLORS[color].map((color) => theme[color]);
+  }, [theme, color]);
+
+  return (
+    <Container {...props}>
+      <SVGContainer {...{ iconColor, backgroundColor }}>{<Icon />}</SVGContainer>
+      <TextContainer>
+        <label>{title}</label>
+        <h1>{text}</h1>
+        <SubtextLabel>{subtext}</SubtextLabel>
+      </TextContainer>
+    </Container>
+  );
+};
+
+export default StatDisplay;

web/src/assets/svgs/icons/paper.svg

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
+
+const StyledHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledH1 = styled.h1`
+  font-size: ${responsiveSize(21, 24)};
+  font-weight: 500;
+  margin-bottom: 48px;
+  letter-spacing: 1px;
+`;
+
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.secondaryPurple};
+`;
+
+const Header: React.FC = () => {
+  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const words = ["Lists", "Knowledge"];
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentWordIndex((prevIndex) => (prevIndex === 0 ? 1 : 0));
+    }, 3000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <StyledHeader>
+      <StyledH1>
+        Community Curated <StyledSpan>{words[currentWordIndex]}</StyledSpan>
+      </StyledH1>
+    </StyledHeader>
+  );
+};
+
+export default Header;

web/src/components/StatDisplay.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Card } from "@kleros/ui-components-library";
+import StatDisplay, { IColors } from "components/StatDisplay";
+import PaperIcon from "svgs/icons/paper.svg";
+import ListIcon from "svgs/icons/list.svg";
+import DollarIcon from "svgs/icons/dollar.svg";
+import JurorIcon from "svgs/icons/user.svg";
+import { responsiveSize } from "styles/responsiveSize";
+
+const StyledCard = styled(Card)`
+  width: auto;
+  height: fit-content;
+  gap: 32px;
+  padding: ${responsiveSize(16, 30)};
+  padding-left: ${responsiveSize(16, 54)};
+  padding-bottom: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+
+  ${landscapeStyle(
+    () => css`
+      padding-bottom: 0px;
+      gap: 0px;
+    `
+  )}
+`;
+
+interface IStat {
+  title: string;
+  coinId?: number;
+  text: string;
+  subtext: string;
+  color: IColors;
+  icon: React.FC<React.SVGAttributes<SVGElement>>;
+}
+
+const stats: IStat[] = [
+  {
+    title: "Total",
+    coinId: 0,
+    text: "25 Lists",
+    subtext: "in 3 Networks",
+    color: "purple",
+    icon: PaperIcon,
+  },
+  {
+    title: "Total",
+    coinId: 1,
+    text: "345 Items",
+    subtext: "Curated",
+    color: "blue",
+    icon: ListIcon,
+  },
+  {
+    title: "All time deposits",
+    coinId: 0,
+    text: "$124,000",
+    subtext: "100 ETH",
+    color: "green",
+    icon: DollarIcon,
+  },
+  {
+    title: "Curators",
+    text: "54",
+    subtext: "36 active",
+    color: "orange",
+    icon: JurorIcon,
+  },
+];
+
+const Stats = () => {
+  return (
+    <StyledCard>
+      {stats.map(({ title, coinId, text, subtext, color, icon }, i) => {
+        return <StatDisplay key={i} {...{ title, color, icon, text, subtext }} />;
+      })}
+    </StyledCard>
+  );
+};
+
+export default Stats;

web/src/pages/Home/Header.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import HeroImage from "components/HeroImage";
 import { responsiveSize } from "styles/responsiveSize";
+import Header from "./Header";
+import Stats from "./Stats";
 
 const Container = styled.div`
   width: 100%;
@@ -15,7 +17,10 @@ const Home: React.FC = () => {
   return (
     <>
       <HeroImage />
-      <Container>Home</Container>
+      <Container>
+        <Header />
+        <Stats />
+      </Container>
     </>
   );
 };