diff --git a/public/fonts/pp-ed-ul.otf b/public/fonts/pp-ed-ul.otf new file mode 100644 index 0000000..59addeb Binary files /dev/null and b/public/fonts/pp-ed-ul.otf differ diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx index a9d0090..c7900c9 100644 --- a/src/app/discover/page.tsx +++ b/src/app/discover/page.tsx @@ -1,12 +1,13 @@ 'use client'; -import { Search } from 'lucide-react'; +import { Globe2Icon } from 'lucide-react'; import { useEffect, useState } from 'react'; -import Link from 'next/link'; import { toast } from 'sonner'; import { cn } from '@/lib/utils'; +import SmallNewsCard from '@/components/Discover/SmallNewsCard'; +import MajorNewsCard from '@/components/Discover/MajorNewsCard'; -interface Discover { +export interface Discover { title: string; content: string; url: string; @@ -75,29 +76,34 @@ const Page = () => { return ( <>
-
-
- -

Discover

-
-
-
- -
- {topics.map((t, i) => ( -
setActiveTopic(t.key)} - > - {t.display} +
+
+
+ +

+ Discover +

- ))} +
+ {topics.map((t, i) => ( +
setActiveTopic(t.key)} + > + {t.display} +
+ ))} +
+
{loading ? ( @@ -120,34 +126,141 @@ const Page = () => {
) : ( -
- {discover && - discover?.map((item, i) => ( - - +
+
+ {discover?.map((item, i) => ( + + ))} +
+
+ +
+ {discover && + discover.length > 0 && + (() => { + const sections = []; + let index = 0; + + while (index < discover.length) { + if (sections.length > 0) { + sections.push( +
, + ); } - alt={item.title} - /> -
-
- {item.title.slice(0, 100)}... -
-

- {item.content.slice(0, 100)}... -

-
- - ))} + + if (index < discover.length) { + sections.push( + , + ); + index++; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length) { + const smallCards = discover.slice(index, index + 3); + sections.push( +
+ {smallCards.map((item, i) => ( + + ))} +
, + ); + index += 3; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length - 1) { + const twoMajorCards = discover.slice(index, index + 2); + twoMajorCards.forEach((item, i) => { + sections.push( + , + ); + if (i === 0) { + sections.push( +
, + ); + } + }); + index += 2; + } else if (index < discover.length) { + sections.push( + , + ); + index++; + } + + if (index < discover.length) { + sections.push( +
, + ); + } + + if (index < discover.length) { + const smallCards = discover.slice(index, index + 3); + sections.push( +
+ {smallCards.map((item, i) => ( + + ))} +
, + ); + index += 3; + } + } + + return sections; + })()} +
)}
diff --git a/src/app/globals.css b/src/app/globals.css index 6bdc1a8..2b332fc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,6 +2,14 @@ @tailwind components; @tailwind utilities; +@font-face { + font-family: 'PP Editorial'; + src: url('/fonts/pp-ed-ul.otf') format('opentype'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + @layer base { .overflow-hidden-scrollable { -ms-overflow-style: none; diff --git a/src/components/Discover/MajorNewsCard.tsx b/src/components/Discover/MajorNewsCard.tsx new file mode 100644 index 0000000..8fe4362 --- /dev/null +++ b/src/components/Discover/MajorNewsCard.tsx @@ -0,0 +1,70 @@ +import { Discover } from '@/app/discover/page'; +import Link from 'next/link'; + +const MajorNewsCard = ({ + item, + isLeft = true, +}: { + item: Discover; + isLeft?: boolean; +}) => ( + + {isLeft ? ( + <> +
+ {item.title} +
+
+

+ {item.title} +

+

+ {item.content} +

+
+ + ) : ( + <> +
+

+ {item.title} +

+

+ {item.content} +

+
+
+ {item.title} +
+ + )} + +); + +export default MajorNewsCard; diff --git a/src/components/Discover/SmallNewsCard.tsx b/src/components/Discover/SmallNewsCard.tsx new file mode 100644 index 0000000..5da80dc --- /dev/null +++ b/src/components/Discover/SmallNewsCard.tsx @@ -0,0 +1,32 @@ +import { Discover } from '@/app/discover/page'; +import Link from 'next/link'; + +const SmallNewsCard = ({ item }: { item: Discover }) => ( + +
+ {item.title} +
+
+

+ {item.title} +

+

+ {item.content} +

+
+ +); + +export default SmallNewsCard;