refactor(web): case details overview file too big

web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import styled from "styled-components";
+import { StyledSkeleton } from "components/StyledSkeleton";
+import { isUndefined } from "utils/index";
+
+const QuestionAndDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+  > * {
+    margin: 0px;
+  }
+`;
+
+const VotingOptions = styled(QuestionAndDescription)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const Answers = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  span {
+    margin: 0px;
+    display: flex;
+    gap: 8px;
+  }
+`;
+
+export const DisputeBasicInfo: React.FC<any> = ({ disputeTemplate }) => {
+  return (
+    <>
+      <h1>
+        {isUndefined(disputeTemplate) ? (
+          <StyledSkeleton />
+        ) : (
+          disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate"
+        )}
+      </h1>
+
+      <QuestionAndDescription>
+        <ReactMarkdown>{disputeTemplate?.question}</ReactMarkdown>
+        <ReactMarkdown>{disputeTemplate?.description}</ReactMarkdown>
+      </QuestionAndDescription>
+
+      {disputeTemplate?.frontendUrl && (
+        <a href={disputeTemplate?.frontendUrl} target="_blank" rel="noreferrer">
+          Go to arbitrable
+        </a>
+      )}
+      <VotingOptions>
+        {disputeTemplate && <h3>Voting Options</h3>}
+        <Answers>
+          {disputeTemplate?.answers?.map((answer: { title: string; description: string }, i: number) => (
+            <span key={i}>
+              <small>Option {i + 1}:</small>
+              <label>{answer.title}</label>
+            </span>
+          ))}
+        </Answers>
+      </VotingOptions>
+    </>
+  );
+};

web/src/pages/Cases/CaseDetails/Overview/Policies.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { IPFS_GATEWAY } from "consts/index";
+import PolicyIcon from "svgs/icons/policy.svg";
+
+const ShadeArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: calc(16px + (20 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875)
+    calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-top: 16px;
+  background-color: ${({ theme }) => theme.mediumBlue};
+  > p {
+    font-size: 14px;
+    margin-top: 0;
+    margin-bottom: 16px;
+    color: ${({ theme }) => theme.primaryBlue};
+    ${landscapeStyle(
+      () => css`
+        margin-bottom: 0;
+      `
+    )};
+  }
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+      justify-content: space-between;
+    `
+  )};
+`;
+
+const StyledA = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  > svg {
+    width: 16px;
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const LinkContainer = styled.div`
+  display: flex;
+  gap: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+interface IPolicies {
+  disputePolicyURI?: string;
+  courtId?: number;
+}
+
+export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId }) => {
+  return (
+    <ShadeArea>
+      <p>Make sure you read and understand the Policies</p>
+      <LinkContainer>
+        {disputePolicyURI && (
+          <StyledA href={`${IPFS_GATEWAY}${disputePolicyURI}`} target="_blank" rel="noreferrer">
+            <PolicyIcon />
+            Dispute Policy
+          </StyledA>
+        )}
+        {courtId && (
+          <StyledA href={`#/courts/${courtId}/purpose?section=description`}>
+            <PolicyIcon />
+            Court Policy
+          </StyledA>
+        )}
+      </LinkContainer>
+    </ShadeArea>
+  );
+};