add website and pdf document icon

This commit is contained in:
Brandon Egger 2023-03-17 23:26:06 -05:00
parent 8de276bde5
commit 89b30506aa

View File

@ -1,5 +1,5 @@
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next"; import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
import { GlobeAltIcon } from '@heroicons/react/24/solid'; import { GlobeAltIcon, DocumentIcon } from '@heroicons/react/24/solid';
import { createProxySSGHelpers } from '@trpc/react-query/ssg'; import { createProxySSGHelpers } from '@trpc/react-query/ssg';
import { appRouter } from "~/server/api/root"; import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db"; import { prisma } from "~/server/db";
@ -50,39 +50,46 @@ export async function getStaticProps(
} }
const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => { const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => {
const Inner = () => {
switch (platformLink.platform) { switch (platformLink.platform) {
case "APP_ANDROID": { case "APP_ANDROID": {
return ( return (
<Link href={platformLink.link}>
<a target="_blank" rel="noopener noreferrer">
<Image className="w-full" src={`/google-play-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/> <Image className="w-full" src={`/google-play-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
</a>
</Link>
) )
} }
case "APP_IOS": { case "APP_IOS": {
return ( return (
<Link href={platformLink.link}>
<Image className="w-full" src={`/app-store-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/> <Image className="w-full" src={`/app-store-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
</Link>
) )
} }
case "PDF": { case "PDF": {
return ( return (
<Link href={platformLink.link}> <div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-16 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
<div className="bg-amber-300 border-2 px-2 h-12 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2"> <DocumentIcon className="w-6" />
<span className="font-bold text-sm my-auto">
Document
</span>
</div>
)
}
case "WEBSITE": {
return (
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-14 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
<GlobeAltIcon className="w-6" /> <GlobeAltIcon className="w-6" />
<span className="font-bold text-sm my-auto"> <span className="font-bold text-sm my-auto">
Website Website
</span> </span>
</div> </div>
</Link>
) )
} }
case "WEBSITE": {
return <></>;
} }
} }
return (
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
<Inner />
</Link>
)
} }
const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => { const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
@ -93,7 +100,7 @@ const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
}); });
return ( return (
<div className="w-48 mx-auto"> <div className="w-48 mx-auto flex flex-col space-y-2">
{buttons} {buttons}
</div> </div>
) )