feat(web): share juror score on x

Author: kemuru

web/src/pages/Dashboard/JurorInfo/Header.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+import XIcon from "svgs/socialmedia/x.svg";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const StyledTitle = styled.h1`
+  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const XLinkContainer = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.primaryBlue};
+  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const StyledXIcon = styled(XIcon)`
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 16px;
+  height: 16px;
+`;
+
+const StyledLink = styled.a`
+  display: flex;
+  border: 0px;
+  align-items: center;
+  gap: 8px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const Header: React.FC = () => {
+  const courtUrl = window.location.origin;
+  const xPostText = `Hey I've been busy as a Juror on the Kleros court, check out my score: Level: 2 (Diogenes). Coherence score: 8. Be a juror with me -> ${courtUrl}`;
+  const xShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(xPostText)}`;
+
+  return (
+    <Container>
+      <StyledTitle>Juror Dashboard</StyledTitle>
+      <XLinkContainer>
+        <StyledLink href={xShareUrl} target="_blank" rel="noreferrer">
+          <StyledXIcon /> <span>Share your juror score</span>
+        </StyledLink>
+      </XLinkContainer>
+    </Container>
+  );
+};
+
+export default Header;

web/src/pages/Dashboard/JurorInfo/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Card as _Card } from "@kleros/ui-components-library";
+import Header from "./Header";
 import Coherency from "./Coherency";
 import JurorRewards from "./JurorRewards";
 import PixelArt from "./PixelArt";
@@ -11,10 +12,6 @@ import { useUserQuery } from "queries/useUser";
 
 const Container = styled.div``;
 
-const Header = styled.h1`
-  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-`;
-
 const Card = styled(_Card)`
   display: flex;
   flex-direction: column;
@@ -61,7 +58,7 @@ const JurorInfo: React.FC = () => {
 
   return (
     <Container>
-      <Header>Juror Dashboard</Header>
+      <Header />
       <Card>
         <PixelArt level={userLevelData.level} />
         <Coherency