From 2e19a61cc1e02e97c14fe0477a96331ebee79710 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 18 Jul 2023 19:58:31 +0100
Subject: [PATCH] feat: display PromotionLinks in sidebar

---
 src/app/(home)/layout.tsx              | 25 +++---------
 src/components/home/HomeSidebar.tsx    |  2 +
 src/components/home/PromotionLinks.tsx | 55 ++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 20 deletions(-)
 create mode 100644 src/components/home/PromotionLinks.tsx

diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index b4a8b3d7..040d72cd 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -2,10 +2,11 @@ import { ConnectButton } from "~/components/common/ConnectButton"
 import { DarkModeSwitch } from "~/components/common/DarkModeSwitch"
 import { Logo } from "~/components/common/Logo"
 import HomeTabs from "~/components/home/HomeTabs"
+import PromotionLinks from "~/components/home/PromotionLinks"
 import { BackToTopFAB } from "~/components/site/BackToTopFAB"
 import { FABContainer } from "~/components/ui/FAB"
 import { UniLink } from "~/components/ui/UniLink"
-import { APP_NAME, DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
+import { APP_NAME } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 
 export default async function HomeLayout({
@@ -40,25 +41,9 @@ export default async function HomeLayout({
         <div className="max-w-screen-xl px-5 mx-auto flex">{children}</div>
       </section>
       <footer className="mt-10 font-medium border-t">
-        <div className="max-w-screen-xl px-5 py-14 mx-auto flex justify-between">
-          <span className="text-zinc-700 ml-2 inline-flex items-center space-x-5 align-middle">
-            {GITHUB_LINK && (
-              <UniLink className="flex items-center" href={GITHUB_LINK}>
-                <span className="inline-block icon-[mingcute--github-fill] text-2xl hover:text-accent"></span>
-              </UniLink>
-            )}
-            {DISCORD_LINK && (
-              <UniLink className="flex items-center" href={DISCORD_LINK}>
-                <span className="inline-block icon-[mingcute--discord-fill] text-2xl hover:text-accent"></span>
-              </UniLink>
-            )}
-            {TWITTER_LINK && (
-              <UniLink className="flex items-center" href={TWITTER_LINK}>
-                <span className="inline-block icon-[mingcute--twitter-fill] text-2xl hover:text-accent"></span>
-              </UniLink>
-            )}
-          </span>
-          <span className="inline-flex items-center space-x-4">
+        <div className="max-w-screen-xl px-5 py-14 mx-auto flex flex-col sm:flex-row justify-between">
+          <PromotionLinks className="w-full sm:w-72" />
+          <span className="inline-flex items-center space-x-4 mx-auto sm:mx-0 mt-10 sm:mt-0">
             <DarkModeSwitch />
             <span>
               &copy;{" "}
diff --git a/src/components/home/HomeSidebar.tsx b/src/components/home/HomeSidebar.tsx
index 50d21fed..b342aaae 100644
--- a/src/components/home/HomeSidebar.tsx
+++ b/src/components/home/HomeSidebar.tsx
@@ -7,6 +7,7 @@ import { getTranslation } from "~/lib/i18n"
 import { getShowcase } from "~/queries/home.server"
 
 import { FollowAllButton } from "../common/FollowAllButton"
+import PromotionLinks from "./PromotionLinks"
 import ShowMoreContainer from "./ShowMoreContainer"
 
 export async function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
@@ -15,6 +16,7 @@ export async function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
 
   return (
     <div className="w-80 pl-10 hidden lg:block space-y-10">
+      <PromotionLinks />
       {!hideSearch && <SearchInput />}
       <div className="text-center text-zinc-700 space-y-3">
         <p className="font-bold text-lg">{t("Suggested creators for you")}</p>
diff --git a/src/components/home/PromotionLinks.tsx b/src/components/home/PromotionLinks.tsx
new file mode 100644
index 00000000..a0cc8f74
--- /dev/null
+++ b/src/components/home/PromotionLinks.tsx
@@ -0,0 +1,55 @@
+import { DevicePhoneMobileIcon } from "@heroicons/react/24/solid"
+
+import { UniLink } from "~/components/ui/UniLink"
+import { DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
+import { getSiteLink } from "~/lib/helpers"
+import { cn } from "~/lib/utils"
+
+export default async function PromotionLinks({
+  className,
+}: {
+  className?: string
+}) {
+  return (
+    <div className={cn("flex items-center", className)}>
+      <UniLink
+        className="flex-1 flex justify-center text-[#ee832f]"
+        href={`${getSiteLink({
+          subdomain: "xlog",
+        })}/xlog-rss`}
+      >
+        <span className="inline-block icon-[mingcute--rss-2-fill] text-2xl"></span>
+      </UniLink>
+      <UniLink
+        className="flex-1 flex justify-center text-sky-500"
+        href="https://oia.xlog.app"
+      >
+        <DevicePhoneMobileIcon className="w-[23px] h-[23px]" />
+      </UniLink>
+      {GITHUB_LINK && (
+        <UniLink
+          className="flex-1 flex justify-center text-[#181717]"
+          href={GITHUB_LINK}
+        >
+          <span className="inline-block icon-[mingcute--github-fill] text-2xl"></span>
+        </UniLink>
+      )}
+      {DISCORD_LINK && (
+        <UniLink
+          className="flex-1 flex justify-center text-[#7289da]"
+          href={DISCORD_LINK}
+        >
+          <span className="inline-block icon-[mingcute--discord-fill] text-2xl"></span>
+        </UniLink>
+      )}
+      {TWITTER_LINK && (
+        <UniLink
+          className="flex-1 flex justify-center text-[#1DA1F2]"
+          href={TWITTER_LINK}
+        >
+          <span className="inline-block icon-[mingcute--twitter-fill] text-2xl"></span>
+        </UniLink>
+      )}
+    </div>
+  )
+}