feat(web): history-timeline-ui

Author: tractorss

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

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import HistoryIcon from "assets/svgs/icons/history.svg";
+
+const HeaderContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const StyledP = styled.p`
+  margin: 0;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const SVGContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ theme }) => theme.primaryText};
+    height: 16px;
+    width: 17px;
+  }
+`;
+const Header: React.FC = () => {
+  return (
+    <HeaderContainer>
+      <SVGContainer>
+        <HistoryIcon />
+      </SVGContainer>
+      <StyledP>History</StyledP>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

web/src/pages/AllLists/RegistryDetails/History/Header.tsx

@@ -1,8 +1,53 @@
+import { Card, CustomTimeline } from "@kleros/ui-components-library";
 import React from "react";
+import styled, { useTheme } from "styled-components";
+import Header from "./Header";
+import ClosedIcon from "assets/svgs/icons/check-circle-outline.svg";
 
+const Container = styled(Card)`
+  display: flex;
+  width: 100%;
+  height: auto;
+  flex-direction: column;
+  align-items: start;
+  padding: 22px 32px;
+  gap: 54px;
+`;
+
+const StyledTimeline = styled(CustomTimeline)`
+  width: 100%;
+  margin-bottom: 30px;
+`;
 interface IHistory {}
 
-const History: React.FC<IHistory> = ({}) => {
-  return <div>History</div>;
+const History: React.FC<IHistory> = () => {
+  const theme = useTheme();
+  const items = [
+    {
+      title: "Item Submitted",
+      variant: theme.primaryBlue,
+      subtitle: "April 06, 2022",
+      rightSided: true,
+    },
+    {
+      title: "Item Challenged",
+      party: "- Case #1369 by Alice.eth",
+      variant: theme.secondaryPurple,
+      subtitle: "April 07, 2022",
+      rightSided: true,
+    },
+    {
+      title: "Item Submitted",
+      subtitle: "April 06, 2022",
+      rightSided: true,
+      Icon: ClosedIcon,
+    },
+  ];
+  return (
+    <Container>
+      <Header />
+      <StyledTimeline {...{ items }} />
+    </Container>
+  );
 };
 export default History;

web/src/pages/AllLists/RegistryDetails/History/index.tsx

@@ -36,9 +36,9 @@ const Tabs: React.FC = () => {
   const navigate = useNavigate();
   const { id } = useParams();
   const location = useLocation();
-  const currentPathName = location.pathname.split("/").at(-1);
+  const currentPathName = location.pathname.split("/").at(3);
 
-  const findTabIndex = (pathName) => TABS.findIndex(({ path }) => path === pathName);
+  const findTabIndex = (pathName) => TABS.findIndex(({ path }) => pathName.startsWith(path));
   const [currentTab, setCurrentTab] = useState(findTabIndex(currentPathName));
 
   useEffect(() => {