feat: added share with twitter button

web/package.json

@@ -64,6 +64,7 @@
     "@filebase/client": "^0.0.4",
     "@kleros/kleros-v2-contracts": "workspace:^",
     "@kleros/ui-components-library": "^2.6.1",
+    "@lens-protocol/widgets-react": "^0.0.31",
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
     "@tanstack/react-query": "^4.28.0",

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

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import TwitterIcon from "svgs/socialmedia/twitter.svg";
+import { Button } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const StyledTwitterIcon = styled(TwitterIcon)`
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+`;
+
+const StyledButton = styled(Button)`
+  border: 0px;
+  background: transparent;
+`;
+
+const shareToTwitter = () => {
+  const tweetText = "Hey I've been busy as a Juror on the Kleros court, check out my score!";
+  const tweetUrl = "https://kleros.io/";
+  const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    tweetText
+  )}&url=${encodeURIComponent(tweetUrl)}`;
+  window.open(twitterShareUrl, "_blank");
+};
+
+const Header: React.FC = () => {
+  return (
+    <Container>
+      <h1>Juror Dashboard</h1>
+      <StyledButton
+        text="Share your juror score"
+        variant="secondary"
+        icon={<StyledTwitterIcon />}
+        onClick={shareToTwitter}
+      ></StyledButton>
+    </Container>
+  );
+};
+
+export default Header;

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

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { Card as _Card } from "@kleros/ui-components-library";
 import Coherency from "./Coherency";
 import JurorRewards from "./JurorRewards";
+import Header from "./Header";
 // import StakingRewards from "./StakingRewards";
 
 const Container = styled.div``;
@@ -24,7 +25,8 @@ const Layout = styled.div`
 const JurorInfo: React.FC = () => {
   return (
     <Container>
-      <h1>Juror Dashboard</h1>
+      {/* <h1>Juror Dashboard</h1> */}
+      <Header />
       <Card>
         <Layout>
           <Coherency />