xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: display PromotionLinks in sidebar

This commit is contained in:
DIYgod 2023-07-18 19:58:31 +01:00
parent a6725868ed
commit 2e19a61cc1
No known key found for this signature in database
3 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/(home)/layout.tsx
View File

@ -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;{" "}

2
src/components/home/HomeSidebar.tsx
View File

@ -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>

55
src/components/home/PromotionLinks.tsx Normal file
View File

@ -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>
)
}