From 26dd2ec610a6f12917940ff63f42ad812fe242f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Francisco?=
 <4301103+tomasfrancisco@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:40:26 +0200
Subject: [PATCH] add reddit to social footer (#54)

---
 apps/engine/src/components/footer/footer.tsx  | 13 +++++++---
 apps/engine/src/config.ts                     |  1 +
 packages/components/src/icons/index.ts        |  1 +
 packages/components/src/icons/reddit-icon.tsx | 25 +++++++++++++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/src/icons/reddit-icon.tsx

diff --git a/apps/engine/src/components/footer/footer.tsx b/apps/engine/src/components/footer/footer.tsx
index 327c827..c3c15d2 100644
--- a/apps/engine/src/components/footer/footer.tsx
+++ b/apps/engine/src/components/footer/footer.tsx
@@ -1,4 +1,4 @@
-import { DSProIcon, Icons, Text } from '@ds-project/components';
+import { DSProIcon, Icons, RedditIcon, Text } from '@ds-project/components';
 import { Button } from '../button';
 import { CommunityBanner } from '../banners/community-banner';
 import { config } from '@/config';
@@ -13,17 +13,22 @@ export function Footer() {
             <div>
               <DSProIcon width={72} height={72} className="text-white" />
               <div className="flex gap-2">
-                <Button asChild mode="dark" size="icon">
+                <Button asChild mode="dark" size="icon" title="GitHub">
                   <Link href={config.githubUrl}>
                     <Icons.GitHubLogoIcon />
                   </Link>
                 </Button>
-                <Button asChild mode="dark" size="icon">
+                <Button asChild mode="dark" size="icon" title="Reddit">
+                  <Link href={config.redditUrl}>
+                    <RedditIcon />
+                  </Link>
+                </Button>
+                <Button asChild mode="dark" size="icon" title="Discord">
                   <Link href={config.discordInviteUrl}>
                     <Icons.DiscordLogoIcon />
                   </Link>
                 </Button>
-                <Button asChild mode="dark" size="icon">
+                <Button asChild mode="dark" size="icon" title="LinkedIn">
                   <Link href={config.linkedinUrl}>
                     <Icons.LinkedInLogoIcon />
                   </Link>
diff --git a/apps/engine/src/config.ts b/apps/engine/src/config.ts
index b22809a..44582e1 100644
--- a/apps/engine/src/config.ts
+++ b/apps/engine/src/config.ts
@@ -31,5 +31,6 @@ export const config = {
   feedbackUrl: 'https://ds-project.supahub.com',
   githubUrl: 'https://github.com/Design-System-Pro',
   linkedinUrl: 'https://www.linkedin.com/company/design-system-pro',
+  redditUrl: 'https://www.reddit.com/r/dspro',
   supportEmail: 'tomas@getds.pro',
 } as const;
diff --git a/packages/components/src/icons/index.ts b/packages/components/src/icons/index.ts
index 9263276..6b038f3 100644
--- a/packages/components/src/icons/index.ts
+++ b/packages/components/src/icons/index.ts
@@ -3,6 +3,7 @@ export * from './ds-logo';
 export * from './ds-pro-icon';
 export * from './figma-logo';
 export * from './github-logo';
+export * from './reddit-icon';
 export * from './penpot-logo';
 import * as Icons from '@radix-ui/react-icons';
 import * as LucideIcons from 'lucide-react';
diff --git a/packages/components/src/icons/reddit-icon.tsx b/packages/components/src/icons/reddit-icon.tsx
new file mode 100644
index 0000000..48fd7a0
--- /dev/null
+++ b/packages/components/src/icons/reddit-icon.tsx
@@ -0,0 +1,25 @@
+import type { IconProps } from '@radix-ui/react-icons/dist/types';
+import * as React from 'react';
+
+export const RedditIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="15"
+        height="15"
+        fill="none"
+        viewBox="0 0 15 15"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill="currentColor"
+          d="M13.75 7.696a1.43 1.43 0 0 0-.232-.776c-.15-.23-.363-.41-.613-.518a1.357 1.357 0 0 0-1.497.285C10.465 6.054 9.19 5.65 7.778 5.6l.771-2.48 2.092.5-.003.03c.001.306.12.598.333.814.212.215.5.336.8.335.623 0 1.13-.515 1.13-1.149 0-.268-.093-.528-.261-.734a1.111 1.111 0 0 0-1.418-.27c-.23.13-.408.337-.504.587l-2.255-.539a.19.19 0 0 0-.14.02.196.196 0 0 0-.09.112l-.86 2.766c-1.479.019-2.818.424-3.803 1.076a1.362 1.362 0 0 0-.937-.378c-.366 0-.717.147-.976.411-.26.264-.406.621-.407.995 0 .515.278.962.686 1.206-.029.15-.044.302-.045.455 0 2.078 2.504 3.768 5.583 3.768s5.583-1.69 5.583-3.768c0-.145-.015-.289-.039-.43.22-.118.404-.295.533-.512a1.42 1.42 0 0 0 .199-.72Zm-8.97.964c0-.46.369-.836.823-.836.454 0 .824.375.824.836a.83.83 0 0 1-.824.836.831.831 0 0 1-.824-.836Zm4.718 2.48c-.415.422-1.066.627-1.991.627l-.007-.002-.007.002c-.925 0-1.577-.205-1.991-.627a.196.196 0 0 1-.057-.139.2.2 0 0 1 .057-.138.192.192 0 0 1 .274 0c.338.343.9.51 1.717.51l.007.002.007-.002c.817 0 1.379-.167 1.717-.51a.192.192 0 0 1 .316.063.2.2 0 0 1-.042.214ZM9.4 9.496a.815.815 0 0 1-.581-.244.848.848 0 0 1-.242-.592c0-.46.369-.836.823-.836.454 0 .823.375.823.836a.83.83 0 0 1-.823.836Z"
+        />
+      </svg>
+    );
+  }
+);
+
+RedditIcon.displayName = 'RedditIcon';