Skip to content

Commit b440655

Browse files
alex-fusionauthalex-fusionauth
committed
add sponsor cards
1 parent 5dcbc7c commit b440655

File tree

7 files changed

+91
-105
lines changed

7 files changed

+91
-105
lines changed

‎app/(main)/(course)/course/[courseSlug]/page.tsx

Lines changed: 28 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import Buy from "@/components/user-buy";
2020
import Link from "next/link";
2121
import ShowPro from "./show-pro";
2222
import UserGoProButton from "@/components/user-go-pro-button";
23+
import CarbonAdBanner from "@/components/carbon-ad-banner";
2324

2425
type Props = {
2526
params: { courseSlug: string };
@@ -75,59 +76,42 @@ export default async function CoursePage({ params }: Props) {
7576
<h1 className="mb-12 text-4xl font-bold leading-tight tracking-tighter text-balance md:text-7xl md:leading-none lg:text-8xl">
7677
{course.title}
7778
</h1>
78-
<div className="hidden md:mb-12 md:block">
79-
<div className="flex flex-col gap-8">
80-
{course?.author && (
81-
<div className="flex">
82-
{course.author.map((a) => (
83-
<Avatar
84-
key={a._id}
85-
href={`/author/${a?.slug}`}
86-
name={a.title}
87-
coverImage={a?.coverImage}
88-
/>
89-
))}
90-
</div>
91-
)}
92-
<div className="text-lg">
93-
<DateComponent dateString={course.date} />
94-
</div>
95-
</div>
96-
</div>
9779
<div className="mb-8 sm:mx-0 md:mb-16 flex flex-col gap-2 md:gap-8">
9880
<CoverMedia
9981
cloudinaryImage={course.coverImage}
10082
cloudinaryVideo={course.videoCloudinary}
10183
youtube={course.youtube}
10284
/>
103-
{course?.stripeProduct && course?.title && (
104-
<section className="flex gap-2">
105-
<Buy stripeProduct={course.stripeProduct} title={course.title} />
106-
<UserGoProButton />
107-
</section>
108-
)}
109-
</div>
110-
<div className="block md:hidden">
111-
<div className="max-w-2xl mx-auto">
112-
<div className="mb-6">
113-
{course.author && (
114-
<div className="flex">
115-
{course.author.map((a) => (
116-
<Avatar
117-
key={a._id}
118-
href={`/author/${a?.slug}`}
119-
name={a.title}
120-
coverImage={a?.coverImage}
121-
/>
122-
))}
123-
</div>
124-
)}
125-
</div>
126-
<div className="mb-4 text-lg">
127-
<DateComponent dateString={course.date} />
85+
<div className="flex justify-between">
86+
<div className="max-w-2xl">
87+
<div className="mb-6">
88+
{course.author && (
89+
<div className="flex">
90+
{course.author.map((a) => (
91+
<Avatar
92+
key={a._id}
93+
href={`/author/${a?.slug}`}
94+
name={a.title}
95+
coverImage={a?.coverImage}
96+
/>
97+
))}
98+
</div>
99+
)}
100+
</div>
101+
<div className="mb-4 text-lg">
102+
<DateComponent dateString={course.date} />
103+
</div>
128104
</div>
105+
<CarbonAdBanner />
106+
{course?.stripeProduct && course?.title && (
107+
<section className="flex gap-2">
108+
<Buy stripeProduct={course.stripeProduct} title={course.title} />
109+
<UserGoProButton />
110+
</section>
111+
)}
129112
</div>
130113
</div>
114+
131115
{course.content?.length && (
132116
<PortableText
133117
className="mx-auto prose-violet lg:prose-xl dark:prose-invert"

‎app/(main)/(podcast)/podcast/[slug]/page.tsx

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -86,32 +86,39 @@ export default async function PodcastPage({ params }: Props) {
8686
youtube={podcast?.youtube}
8787
/>
8888
</div>
89+
8990
<div className="max-w-2xl sm:max-w-none">
90-
<div className="mb-6">
91-
{(podcast?.author || podcast?.guest) && (
92-
<div className="flex flex-wrap gap-2">
93-
{podcast?.author?.map((a) => (
94-
<Avatar
95-
key={a._id}
96-
name={a.title}
97-
href={`/author/${a?.slug}`}
98-
coverImage={a?.coverImage}
99-
/>
100-
))}
101-
{podcast?.guest?.map((a) => (
102-
<Avatar
103-
key={a._id}
104-
name={a.title}
105-
href={`/guest/${a?.slug}`}
106-
coverImage={a?.coverImage}
107-
/>
108-
))}
91+
<div className="flex flex-wrap justify-between">
92+
<div className="flex-1">
93+
<div className="mb-6">
94+
{(podcast?.author || podcast?.guest) && (
95+
<div className="flex flex-wrap gap-2">
96+
{podcast?.author?.map((a) => (
97+
<Avatar
98+
key={a._id}
99+
name={a.title}
100+
href={`/author/${a?.slug}`}
101+
coverImage={a?.coverImage}
102+
/>
103+
))}
104+
{podcast?.guest?.map((a) => (
105+
<Avatar
106+
key={a._id}
107+
name={a.title}
108+
href={`/guest/${a?.slug}`}
109+
coverImage={a?.coverImage}
110+
/>
111+
))}
112+
</div>
113+
)}
109114
</div>
110-
)}
111-
</div>
112-
<div className="mb-4 text-lg">
113-
<DateComponent dateString={podcast.date} />
115+
<div className="mb-4 text-lg">
116+
<DateComponent dateString={podcast.date} />
117+
</div>
118+
</div>
119+
<CarbonAdBanner />
114120
</div>
121+
115122
{src && (
116123
<div className="flex flex-col sm:flex-row justify-start flex-wrap w-full p-2 sm:p-4 border border-foreground gap-2 sm:gap-4 items-center">
117124
<h2 className="text-xl font-bold w-full text-center sm:text-start">Listening Options</h2>
@@ -125,7 +132,7 @@ export default async function PodcastPage({ params }: Props) {
125132
</div>
126133
)}
127134
</div>
128-
{podcast?.sponsor?.length ? (
135+
{podcast?.sponsor?.length && (
129136
<section className="flex flex-col mt-10 mb-10">
130137
<h2 className="mb-4 text-2xl font-bold">Sponsors</h2>
131138
<hr className="border-accent-2" />
@@ -134,9 +141,8 @@ export default async function PodcastPage({ params }: Props) {
134141
</div>
135142
<hr className="border-accent-2" />
136143
</section>
137-
) : (
138-
<CarbonAdBanner />
139144
)}
145+
140146
{podcast?.content?.length && (
141147
<PortableText
142148
className="mx-auto prose-violet lg:prose-xl dark:prose-invert"

‎app/(main)/(post)/post/[slug]/page.tsx

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -81,26 +81,29 @@ export default async function PostPage({ params }: Props) {
8181
youtube={post?.youtube}
8282
/>
8383
</div>
84-
<div className="max-w-2xl sm:max-w-none">
85-
<div className="mb-6">
86-
{(post?.author) && (
87-
<div className="flex flex-wrap gap-2">
88-
{post?.author?.map((a) => (
89-
<Avatar
90-
key={a._id}
91-
name={a.title}
92-
href={`/author/${a?.slug}`}
93-
coverImage={a?.coverImage}
94-
/>
95-
))}
96-
</div>
97-
)}
98-
</div>
99-
<div className="mb-4 text-lg">
100-
<DateComponent dateString={post.date} />
84+
<div className="flex flex-wrap justify-between">
85+
<div className="max-w-2xl sm:max-w-none flex-1">
86+
<div className="mb-6">
87+
{(post?.author) && (
88+
<div className="flex flex-wrap gap-2">
89+
{post?.author?.map((a) => (
90+
<Avatar
91+
key={a._id}
92+
name={a.title}
93+
href={`/author/${a?.slug}`}
94+
coverImage={a?.coverImage}
95+
/>
96+
))}
97+
</div>
98+
)}
99+
</div>
100+
<div className="mb-4 text-lg">
101+
<DateComponent dateString={post.date} />
102+
</div>
101103
</div>
104+
<CarbonAdBanner />
102105
</div>
103-
{post?.sponsor?.length ? (
106+
{post?.sponsor?.length && (
104107
<section className="flex flex-col mt-10 mb-10">
105108
<h2 className="mb-4 text-2xl font-bold">Sponsors</h2>
106109
<hr className="border-accent-2" />
@@ -109,8 +112,6 @@ export default async function PostPage({ params }: Props) {
109112
</div>
110113
<hr className="border-accent-2" />
111114
</section>
112-
) : (
113-
<CarbonAdBanner />
114115
)}
115116
{post.content?.length && (
116117
<PortableText

‎app/(main)/layout.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { VisualEditing, toPlainText } from "next-sanity";
66
import { Nunito } from "next/font/google";
77
import { Inter } from "next/font/google";
88
import { draftMode } from "next/headers";
9-
import { JSX, SVGProps, Suspense } from "react";
109

1110
import AlertBanner from "@/components/alert-banner";
1211
import NextTopLoader from 'nextjs-toploader';
@@ -27,7 +26,6 @@ import AlgoliaDialog from "@/components/algolia-dialog";
2726
import { FaBars } from "react-icons/fa6";
2827
import PlayerFloating from "@/components/player-floating";
2928
import { PlayerProvider } from "@/components/player-context";
30-
import Script from "next/script";
3129

3230
const nunito = Nunito({
3331
subsets: ["latin"],

‎app/(main)/page.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import CarbonAdBanner from "@/components/carbon-ad-banner";
12
import CoverImage from "@/components/cover-image";
23
import Buy from "@/components/user-buy";
34
import UserGoProButton from "@/components/user-go-pro-button";
@@ -73,6 +74,11 @@ export default async function HomePage() {
7374
</div>
7475
</section>
7576
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted">
77+
<div className="relative mb-32 flex flex-col justify-center items-center">
78+
<div className="lg:absolute lg:-mt-36 px-8">
79+
<CarbonAdBanner />
80+
</div>
81+
</div>
7682
<div className="container px-4 md:px-6">
7783
<div className="flex flex-col items-center justify-center space-y-4 text-center">
7884
<div className="space-y-2">

‎components/carbon-ad-banner.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,6 @@ export default function CarbonAdBanner() {
1313
reference.current.appendChild(s);
1414
}, []);
1515
return (
16-
<section className="flex flex-col mt-10 mb-10">
17-
<h2 className="mb-4 text-2xl font-bold">Ads</h2>
18-
<hr className="border-accent-2" />
19-
<div className="my-12 ">
20-
<div className="p-4 grid gap-6 md:p-6 grid-flow-col auto-cols-[1fr]">
21-
<div className="flex justify-center my-2" ref={reference} />
22-
</div>
23-
</div>
24-
<hr className="border-accent-2" />
25-
</section>
16+
<div className="flex justify-center my-2" ref={reference} />
2617
)
2718
}

‎components/sponsor-card.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,19 @@ export default function SponsorCard({
1616
if (!sponsors?.length) return <></>;
1717

1818
return (
19-
<div className="p-4 grid gap-6 md:p-6 grid-flow-col auto-cols-[1fr]">
19+
<div className="p-4 grid gap-6 md:p-6 lg:grid-flow-col lg:auto-cols-[1fr] justify-center">
2020
{sponsors?.map((sponsor) => {
2121
const { slug, _id, title, excerpt, coverImage, url } = sponsor;
2222
return (
2323
<Link
2424
href={url || `/sponsor/${slug}`}
2525
key={_id}
2626
target={url ? "_blank" : "_self"}
27-
className="max-w-xl"
27+
className="max-w-xl overflow-hidden shadow-md transition-all hover:scale-[1.02] hover:shadow-lg relative flex flex-col"
2828
>
2929
<Card
3030
key={_id}
31-
className="overflow-hidden shadow-md transition-all hover:scale-[1.02] hover:shadow-lg relative flex flex-col"
31+
className="flex-grow"
3232
>
3333
<CardHeader className="p-0 pb-6">
3434
<CoverImage image={coverImage} priority={false} />

0 commit comments

Comments
 (0)