From c777a405c47eb5cd09b557124611d61c81d174b1 Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Fri, 20 Oct 2023 18:27:32 +0100
Subject: [PATCH] feat: adds join discord card

---
 .../JoinDiscordCard/JoinDiscordCard.tsx       | 33 +++++++++++++++++++
 src/components/JoinDiscordCard/index.ts       |  1 +
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/JoinDiscordCard/JoinDiscordCard.tsx
 create mode 100644 src/components/JoinDiscordCard/index.ts

diff --git a/src/components/JoinDiscordCard/JoinDiscordCard.tsx b/src/components/JoinDiscordCard/JoinDiscordCard.tsx
new file mode 100644
index 0000000..4b6c28f
--- /dev/null
+++ b/src/components/JoinDiscordCard/JoinDiscordCard.tsx
@@ -0,0 +1,33 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
+import { DiscordIcon } from '../Icons/DiscordIcon'
+
+type JoinDiscordCardProps = React.HTMLAttributes<HTMLDivElement>
+
+export const JoinDiscordCard = (props: JoinDiscordCardProps) => {
+  return (
+    <JoinDiscordCardContainer {...props}>
+      <Typography variant="body1">Join the discussion</Typography>
+      <Link
+        href="https://discord.gg/logos-state"
+        style={{
+          textDecoration: 'none',
+        }}
+      >
+        <Button icon={<DiscordIcon color="primary" />}>
+          <Typography variant="body2">Go to Discord</Typography>
+        </Button>
+      </Link>
+    </JoinDiscordCardContainer>
+  )
+}
+
+const JoinDiscordCardContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  padding: 24px 0px;
+  margin-bottom: 24px;
+`
diff --git a/src/components/JoinDiscordCard/index.ts b/src/components/JoinDiscordCard/index.ts
new file mode 100644
index 0000000..c3c0bd2
--- /dev/null
+++ b/src/components/JoinDiscordCard/index.ts
@@ -0,0 +1 @@
+export * from './JoinDiscordCard'