Skip to content

Commit 6357446

Browse files
tractorsstractorss
committed
refactor(frontend): tab-component-refactor
1 parent d291997 commit 6357446

File tree

11 files changed

+111
-117
lines changed

11 files changed

+111
-117
lines changed

‎frontend/src/components/Earn/TabSection/index.tsx

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
"use client";
2-
3-
import { useMemo, useState } from "react";
4-
51
import Tab from "@/components/Tab";
62
import { TabSectionQueryType } from "@/queries/earn/tabs-data";
73

@@ -13,30 +9,26 @@ interface ITabSection {
139
}
1410

1511
const TabSection: React.FC<ITabSection> = ({ tabsData }) => {
16-
const [activeTab, setActiveTab] = useState(0);
17-
18-
const tabItems = useMemo(
19-
() => [
20-
{ text: tabsData.earnPageBecomeAJurorTabContent.tabName, value: 0 },
21-
{ text: tabsData.earnPageBecomeACuratorTabContent.tabName, value: 1 },
22-
],
23-
[tabsData],
24-
);
25-
2612
return (
2713
<div className="bg-background-2 px-6 py-12 lg:px-32">
2814
<Tab
29-
items={tabItems}
30-
currentValue={activeTab}
31-
callback={(val: number) => {
32-
setActiveTab(val);
33-
}}
15+
items={[
16+
{
17+
text: tabsData.earnPageBecomeAJurorTabContent.tabName,
18+
children: (
19+
<JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent} />
20+
),
21+
},
22+
{
23+
text: tabsData.earnPageBecomeACuratorTabContent.tabName,
24+
children: (
25+
<CuratorTabContent
26+
{...tabsData.earnPageBecomeACuratorTabContent}
27+
/>
28+
),
29+
},
30+
]}
3431
/>
35-
{activeTab === 1 ? (
36-
<CuratorTabContent {...tabsData.earnPageBecomeACuratorTabContent} />
37-
) : (
38-
<JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent} />
39-
)}
4032
</div>
4133
);
4234
};

‎frontend/src/components/ResearchDevelopment/Hero.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
1616
const { header, subtitle, buttons, arrowLink, background } =
1717
heroData.rAndDPageHero;
1818
return (
19-
<div className="relative px-6 pb-56 pt-44 md:pt-52 lg:px-32 lg:pb-72">
19+
<div className="relative px-6 pb-36 pt-44 md:pt-52 lg:px-32 lg:pb-72">
2020
<div className="space-y-8">
2121
<h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
2222
{header}

‎frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useMemo, useState } from "react";
23

34
import Pagination from "@/components/Pagination";

‎frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useMemo, useState } from "react";
23

34
import Pagination from "@/components/Pagination";

‎frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,23 @@ const FellowshipTabContent: React.FC<IFellowshipTabContent> = ({
2121
fellows,
2222
}) => {
2323
return (
24-
<div className="flex flex-col gap-8 pb-12 pt-[88px] lg:py-24">
25-
<h1 className="text-xl font-medium text-primary-text lg:text-3xl">
26-
{header}
27-
</h1>
28-
<p className="text-secondary-text lg:text-lg">{subtitle}</p>
24+
<div className="bg-background-2 px-6 lg:px-32">
25+
<div className="flex flex-col gap-8 pb-12 pt-[88px] lg:py-24">
26+
<h1 className="text-xl font-medium text-primary-text lg:text-3xl">
27+
{header}
28+
</h1>
29+
<p className="text-secondary-text lg:text-lg">{subtitle}</p>
2930

30-
<h3 className="my-8 text-lg text-secondary-text lg:text-xl">
31-
{testimonialsHeader}
32-
</h3>
33-
<Testimonials {...{ testimonials }} />
31+
<h3 className="my-8 text-lg text-secondary-text lg:text-xl">
32+
{testimonialsHeader}
33+
</h3>
34+
<Testimonials {...{ testimonials }} />
3435

35-
<h3 className="my-4 text-lg text-secondary-text lg:text-xl">
36-
{fellowsHeader}
37-
</h3>
38-
<Fellows {...{ fellows }} />
36+
<h3 className="my-4 text-lg text-secondary-text lg:text-xl">
37+
{fellowsHeader}
38+
</h3>
39+
<Fellows {...{ fellows }} />
40+
</div>
3941
</div>
4042
);
4143
};

‎frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import clsx from "clsx";
23
import Image from "next/image";
34

‎frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useMemo, useState } from "react";
23

34
import Pagination from "@/components/Pagination";

‎frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useMemo, useState } from "react";
23

34
import Pagination from "@/components/Pagination";

‎frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface IResearchTabContent extends RAndDPageResearchTabSection {
1515
}
1616
const ResearchTabContent: React.FC<IResearchTabContent> = (props) => {
1717
return (
18-
<div>
18+
<div className="bg-background-2 px-6 lg:px-32">
1919
<ResearchSection {...props} />
2020
<PublicationSection {...props} />
2121
</div>

‎frontend/src/components/ResearchDevelopment/TabSection/index.tsx

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
"use client";
2-
3-
import { useMemo, useState } from "react";
4-
51
import Tab from "@/components/Tab";
62
import { TabSectionQueryType } from "@/queries/research-development/tabs-data";
73

@@ -15,47 +11,43 @@ interface ITabSection {
1511
}
1612

1713
const TabSection: React.FC<ITabSection> = ({ tabsData }) => {
18-
const [activeTab, setActiveTab] = useState(0);
19-
20-
const tabItems = useMemo(
21-
() => [
22-
{ text: tabsData.rAndDPageResearchTabSection.tabName, value: 0 },
23-
{ text: tabsData.rAndDPageFellowshipTabSection.tabName, value: 1 },
24-
],
25-
[tabsData],
26-
);
27-
2814
return (
29-
<>
30-
<div className="bg-background-2 px-6 pb-12 pt-[39px] lg:px-32 lg:py-12">
31-
<Tab
32-
items={tabItems}
33-
currentValue={activeTab}
34-
callback={(val: number) => {
35-
setActiveTab(val);
36-
}}
37-
/>
38-
{activeTab === 1 ? (
39-
<FellowshipTabContent
40-
{...tabsData.rAndDPageFellowshipTabSection}
41-
{...tabsData}
42-
/>
43-
) : (
44-
<ResearchTabContent
45-
{...tabsData.rAndDPageResearchTabSection}
46-
{...tabsData}
47-
/>
48-
)}
49-
</div>
50-
51-
{activeTab === 1 ? (
52-
<WaitlistSection
53-
{...tabsData.rAndDPageFellowshipTabSection.waitlistSection}
54-
/>
55-
) : (
56-
<KlerosBook {...tabsData.rAndDPageResearchTabSection.klerosBook} />
57-
)}
58-
</>
15+
<div>
16+
<Tab
17+
items={[
18+
{
19+
text: tabsData.rAndDPageResearchTabSection.tabName,
20+
children: (
21+
<>
22+
<ResearchTabContent
23+
{...tabsData.rAndDPageResearchTabSection}
24+
{...tabsData}
25+
/>
26+
<KlerosBook
27+
{...tabsData.rAndDPageResearchTabSection.klerosBook}
28+
/>
29+
</>
30+
),
31+
},
32+
{
33+
text: tabsData.rAndDPageFellowshipTabSection.tabName,
34+
children: (
35+
<>
36+
{" "}
37+
<FellowshipTabContent
38+
{...tabsData.rAndDPageFellowshipTabSection}
39+
{...tabsData}
40+
/>
41+
<WaitlistSection
42+
{...tabsData.rAndDPageFellowshipTabSection.waitlistSection}
43+
/>
44+
</>
45+
),
46+
},
47+
]}
48+
className="bg-background-2 px-6 pt-[39px] lg:px-32 lg:pt-12"
49+
/>
50+
</div>
5951
);
6052
};
6153
export default TabSection;

‎frontend/src/components/Tab.tsx

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,58 @@
11
"use client";
22

3-
import { useCallback } from "react";
3+
import { useCallback, useState } from "react";
44

55
import clsx from "clsx";
66

7-
type TabItem<T> = {
7+
type TabItem = {
88
text: string;
9-
value: T;
9+
children: React.ReactNode;
1010
};
1111

12-
interface ITab<T> {
13-
items: TabItem<T>[];
14-
currentValue: T;
15-
callback: (value: T) => void;
12+
interface ITab {
13+
items: TabItem[];
1614
className?: string;
1715
}
1816

19-
const Tab = <T,>({ items, currentValue, callback, className }: ITab<T>) => {
17+
const Tab = ({ items, className }: ITab) => {
18+
const [activeTab, setActiveTab] = useState(0);
19+
2020
const handleKeyDown = useCallback(
21-
(event: React.KeyboardEvent, value: T) => {
21+
(event: React.KeyboardEvent, value: number) => {
2222
if (event.key === "Enter" || event.key === " ") {
23-
callback(value);
23+
setActiveTab(value);
2424
}
2525
},
26-
[callback],
26+
[],
2727
);
2828

2929
return (
30-
<div role="tablist" className={`flex h-fit w-full ${className}`}>
31-
{items.map((item, i) => (
32-
<div
33-
role="tab"
34-
tabIndex={i + 1}
35-
aria-selected={item.value === currentValue}
36-
key={item.text}
37-
className={clsx(
38-
"min-h-14",
39-
"transition-all hover:cursor-pointer hover:border-b-[3px] hover:border-b-primary-blue hover:text-primary-blue",
40-
"flex flex-grow items-center justify-center pb-6",
41-
"text-center font-medium lg:text-lg",
42-
item.value === currentValue
43-
? "border-b-[3px] border-b-primary-blue text-primary-blue"
44-
: "border-b border-b-stroke text-secondary-text",
45-
)}
46-
onClick={() => callback(item.value)}
47-
onKeyDown={(e) => handleKeyDown(e, item.value)}
48-
>
49-
{item.text}
50-
</div>
51-
))}
52-
</div>
30+
<>
31+
<div role="tablist" className={`flex h-fit w-full ${className}`}>
32+
{items.map((item, i) => (
33+
<div
34+
role="tab"
35+
tabIndex={i + 1}
36+
aria-selected={i === activeTab}
37+
key={item.text}
38+
className={clsx(
39+
"min-h-14",
40+
"transition-all hover:cursor-pointer hover:border-b-[3px] hover:border-b-primary-blue hover:text-primary-blue",
41+
"flex flex-grow items-center justify-center pb-6",
42+
"text-center font-medium lg:text-lg",
43+
i === activeTab
44+
? "border-b-[3px] border-b-primary-blue text-primary-blue"
45+
: "border-b border-b-stroke text-secondary-text",
46+
)}
47+
onClick={() => setActiveTab(i)}
48+
onKeyDown={(e) => handleKeyDown(e, i)}
49+
>
50+
{item.text}
51+
</div>
52+
))}
53+
</div>
54+
{items[activeTab].children}
55+
</>
5356
);
5457
};
5558

0 commit comments

Comments
 (0)