Skip to content

Commit 48139e7

Browse files
TylerAPfleddererTylerAPfledderer
committed
refactor(resources): add wrapper around main content
1 parent 1a54816 commit 48139e7

File tree

1 file changed

+102
-100
lines changed

1 file changed

+102
-100
lines changed

‎src/pages/[locale]/resources.tsx

Lines changed: 102 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ResourceItem, ResourcesContainer } from "@/components/Resources"
1313
import { useResources } from "@/components/Resources/useResources"
1414
import Translation from "@/components/Translation"
1515
import { ButtonLink } from "@/components/ui/buttons/Button"
16+
import { Stack } from "@/components/ui/flex"
1617
import Link from "@/components/ui/Link"
1718
import { Section } from "@/components/ui/section"
1819

@@ -114,112 +115,113 @@ const ResourcesPage = ({ txCostsMedianUsd }) => {
114115
description={t("page-resources-hero-description")}
115116
heroImg={heroImg}
116117
/>
117-
118-
<div className="sticky top-1 my-8 flex flex-col items-center gap-3 py-4 text-center md:top-6 md:px-2">
119-
<div className="my-2 text-body-medium">
120-
{t("page-resources-whats-on-this-page")}
121-
</div>
122-
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
123-
{resourceSections.map(({ key, title, icon }) => (
124-
<ButtonLink
125-
key={key}
126-
href={`#${key}`}
127-
variant="ghost"
128-
isSecondary
129-
className={cn(
130-
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
131-
activeSection === key && "!text-primary"
132-
)}
133-
>
134-
{activeSection === key && (
135-
<motion.div
136-
layoutId="active-section-highlight"
137-
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
138-
/>
139-
)}
140-
{icon && <span className="z-10 text-lg">{icon}</span>}
141-
<span className="relative z-10">{title}</span>
142-
</ButtonLink>
143-
))}
144-
</nav>
145-
</div>
146-
147-
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
148-
<section id={key} key={key} className="mb-16 scroll-mt-40">
149-
<div className="group flex w-full items-center gap-3 border-b bg-transparent px-4 py-6">
150-
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
151-
{icon || <StackIcon />}
152-
</div>
153-
<h2 className="flex-1 text-start font-black">{sectionTitle}</h2>
118+
<Stack className="gap-4 px-2 py-4 md:gap-8 md:px-4 lg:px-8 xl:gap-11">
119+
<div className="sticky top-1 my-8 flex flex-col items-center gap-3 py-4 text-center md:top-6 md:px-2">
120+
<div className="my-2 text-body-medium">
121+
{t("page-resources-whats-on-this-page")}
154122
</div>
155-
<div className="grid grid-cols-1 gap-8 px-4 pb-12 pt-8 md:pb-12 md:pt-8 lg:grid-cols-2">
156-
{boxes.map(({ title, metric, items, className }) => (
157-
<div
123+
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
124+
{resourceSections.map(({ key, title, icon }) => (
125+
<ButtonLink
126+
key={key}
127+
href={`#${key}`}
128+
variant="ghost"
129+
isSecondary
158130
className={cn(
159-
"overflow-hidden rounded-2xl border shadow-lg",
160-
className
131+
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
132+
activeSection === key && "!text-primary"
161133
)}
162-
key={title}
163134
>
164-
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
165-
{title}
166-
</div>
167-
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
168-
{metric && metric}
169-
<ResourcesContainer>
170-
{items.map((item) => (
171-
<ResourceItem item={item} key={item.title} />
172-
))}
173-
</ResourcesContainer>
174-
</div>
175-
</div>
135+
{activeSection === key && (
136+
<motion.div
137+
layoutId="active-section-highlight"
138+
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
139+
/>
140+
)}
141+
{icon && <span className="z-10 text-lg">{icon}</span>}
142+
<span className="relative z-10">{title}</span>
143+
</ButtonLink>
176144
))}
177-
</div>
178-
</section>
179-
))}
180-
181-
<div className="mb-20 text-center">
182-
<Translation id="page-resources:page-resources-find-more" />
183-
</div>
184-
185-
<Section
186-
id="contribute"
187-
className={cn(
188-
"before:absolute before:-inset-px before:bottom-0 before:z-hide before:rounded-[calc(theme(borderRadius.4xl)+1px)] before:content-['']", // Border/gradient positioning
189-
"before:bg-gradient-to-b before:from-primary-hover/[0.24] before:to-primary-hover/[0.08] before:dark:from-primary-hover/40 before:dark:to-primary-hover/20", // Border/gradient coloring
190-
"relative inset-0 rounded-4xl bg-background" // Paint background color over card portion
191-
)}
192-
>
193-
<div className="mb-12 flex flex-col gap-y-8 rounded-4xl bg-radial-a px-8 py-12 lg:mb-32 xl:mb-36">
194-
<div className="flex flex-col gap-y-4 text-center">
195-
<h2>{t("page-resources-contribute-title")}</h2>
196-
<p>{t("page-resources-contribute-description")}</p>
197-
</div>
198-
<div className="mx-auto grid grid-cols-1 gap-16 md:grid-cols-2">
199-
{/* TODO: Add issue template for resource listing and redirect to new template */}
200-
<ButtonLink
201-
href={new URL(
202-
"issues/new?template=feature_request.yaml",
203-
GITHUB_REPO_URL
204-
).toString()}
205-
variant="outline"
206-
isSecondary
207-
>
208-
{t("page-resources-suggest-resource")}
209-
</ButtonLink>
210-
<ButtonLink
211-
href={new URL(
212-
"issues/new?template=bug_report.yaml",
213-
GITHUB_REPO_URL
214-
).toString()}
215-
variant="outline"
216-
isSecondary
217-
>
218-
<FaGithub /> {t("page-resources-found-bug")}
219-
</ButtonLink>
220-
</div>
145+
</nav>
146+
</div>
147+
148+
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
149+
<section id={key} key={key} className="mb-16 scroll-mt-40">
150+
<div className="group flex w-full items-center gap-3 border-b bg-transparent px-4 py-6">
151+
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
152+
{icon || <StackIcon />}
153+
</div>
154+
<h2 className="flex-1 text-start font-black">{sectionTitle}</h2>
155+
</div>
156+
<div className="grid grid-cols-1 gap-8 px-4 pb-12 pt-8 md:pb-12 md:pt-8 lg:grid-cols-2">
157+
{boxes.map(({ title, metric, items, className }) => (
158+
<div
159+
className={cn(
160+
"overflow-hidden rounded-2xl border shadow-lg",
161+
className
162+
)}
163+
key={title}
164+
>
165+
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
166+
{title}
167+
</div>
168+
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
169+
{metric && metric}
170+
<ResourcesContainer>
171+
{items.map((item) => (
172+
<ResourceItem item={item} key={item.title} />
173+
))}
174+
</ResourcesContainer>
175+
</div>
176+
</div>
177+
))}
178+
</div>
179+
</section>
180+
))}
181+
182+
<div className="mb-20 text-center">
183+
<Translation id="page-resources:page-resources-find-more" />
221184
</div>
222-
</Section>
185+
186+
<Section
187+
id="contribute"
188+
className={cn(
189+
"before:absolute before:-inset-px before:bottom-0 before:z-hide before:rounded-[calc(theme(borderRadius.4xl)+1px)] before:content-['']", // Border/gradient positioning
190+
"before:bg-gradient-to-b before:from-primary-hover/[0.24] before:to-primary-hover/[0.08] before:dark:from-primary-hover/40 before:dark:to-primary-hover/20", // Border/gradient coloring
191+
"relative inset-0 rounded-4xl bg-background" // Paint background color over card portion
192+
)}
193+
>
194+
<div className="mb-12 flex flex-col gap-y-8 rounded-4xl bg-radial-a px-8 py-12 lg:mb-32 xl:mb-36">
195+
<div className="flex flex-col gap-y-4 text-center">
196+
<h2>{t("page-resources-contribute-title")}</h2>
197+
<p>{t("page-resources-contribute-description")}</p>
198+
</div>
199+
<div className="mx-auto grid grid-cols-1 gap-16 md:grid-cols-2">
200+
{/* TODO: Add issue template for resource listing and redirect to new template */}
201+
<ButtonLink
202+
href={new URL(
203+
"issues/new?template=feature_request.yaml",
204+
GITHUB_REPO_URL
205+
).toString()}
206+
variant="outline"
207+
isSecondary
208+
>
209+
{t("page-resources-suggest-resource")}
210+
</ButtonLink>
211+
<ButtonLink
212+
href={new URL(
213+
"issues/new?template=bug_report.yaml",
214+
GITHUB_REPO_URL
215+
).toString()}
216+
variant="outline"
217+
isSecondary
218+
>
219+
<FaGithub /> {t("page-resources-found-bug")}
220+
</ButtonLink>
221+
</div>
222+
</div>
223+
</Section>
224+
</Stack>
223225
</MainArticle>
224226
)
225227
}

0 commit comments

Comments
 (0)