diff --git a/front/index.html b/front/index.html index e4b78ea..a8290b7 100644 --- a/front/index.html +++ b/front/index.html @@ -5,6 +5,7 @@ Vite + React + TS +
diff --git a/front/src/components/ArticleCard.tsx b/front/src/components/ArticleCard.tsx index 6a02bb3..8167cc6 100644 --- a/front/src/components/ArticleCard.tsx +++ b/front/src/components/ArticleCard.tsx @@ -13,7 +13,7 @@ export default function ArticleCard({ articlePreview }: { articlePreview: Articl margin: '20px', padding: '1.25em', paddingBottom: '1em', - flex: '27%', + flex: '0 1 30%', textAlign: 'left', }}> Article preview(true); const [error, setError] = useState(null); + + const articles: ArticlePreview[] = [ + { + id: 1, + title: "The Great Barrier Reef", + preview: "The Great Barrier Reef is the largest coral reef system in the world, composed of over 2,900 individual reefs and 900 islands stretching for over 2,300 kilometers (1,400 mi) over an area of approximately 344,400 square kilometers (133,000 sq mi).", + }, + { + id: 2, + title: "The Great Pacific Garbage Patch", + preview: "The Great Pacific Garbage Patch, also known as the Pacific trash vortex, is a gyre of marine debris particles in the north-central Pacific Ocean. It is located roughly from 135°W to 155°W and 35°N to 42°N.", + }, + { + id: 3, + title: "The Amazon Rainforest", + preview: "The Amazon rainforest, alternatively, the Amazon Jungle, also known in English as Amazonia, is a moist broadleaf tropical rainforest in the Amazon biome that covers most of the Amazon basin of South America.", + }, + { + id: 4, + title: "The Arctic", + preview: "The Arctic is a polar region located at the northernmost part of Earth. The Arctic consists of the Arctic Ocean, adjacent seas, and parts of Alaska (United States), Northern Canada (Canada), Finland, Greenland (Kingdom of Denmark), Iceland, Norway, Russia, and Sweden.", + }, + { + id: 5, + title: "The Antarctic", + preview: "The Antarctic, is a polar region containing the geographic South Pole and is situated in the Antarctic region of the Southern Hemisphere, almost entirely south of the Antarctic Circle, and is surrounded by the Southern Ocean.", + + } + ]; + + useEffect(() => { fetch('/api/articles') - .then(response => response.json()) + // .then(response => response.json()) + .then(_ => articles) .then((data: ArticlePreview[]) => setArticlePreviews(data)) .catch(_ => setError('Failed to fetch articles')) .finally(() => setLoading(false)); @@ -37,9 +69,12 @@ export default function ArticlesSection() { textAlign: 'center', width: '100%', }}>Articles - {articlePreviews.map(articlePreview => ( - - ))} +
+ + {articlePreviews.map(articlePreview => ( + + ))} +
{!loading && !error && articlePreviews.length === 0 &&

No articles found

} {loading &&

Loading...

} {error &&

{error}

} diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx index 654bda5..3f548fd 100644 --- a/front/src/components/Button.tsx +++ b/front/src/components/Button.tsx @@ -1,14 +1,14 @@ import { ReactNode, MouseEventHandler } from 'react'; interface ButtonProps { - onClick: MouseEventHandler; color: 'primary' | 'secondary'; children: ReactNode; + url?: string; } -export default function Button({ onClick, color, children }: ButtonProps) { +export default function Button({ color, children, url }: ButtonProps) { return ( - + textDecoration: 'none', + }} href={url} className="ni-button" role="button">{children} ) } diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index 0096871..ee9f54c 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -9,7 +9,7 @@ export default function ClickableLink({url, text}: ClickableLinkProps) { backgroundColor: "transparent", borderRadius: '8px', borderWidth: '0', - color:"purple", + color:"white", cursor: 'pointer', display: 'inline-block', fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif', diff --git a/front/src/components/Footer.tsx b/front/src/components/Footer.tsx index 468812c..f4b2bee 100644 --- a/front/src/components/Footer.tsx +++ b/front/src/components/Footer.tsx @@ -7,12 +7,14 @@ interface FooterProps { export default function Footer ({bgcolor}:FooterProps) { return (
-
ENSIBS
RedCRAB
-
+

ENSIBS

RedCRAB

+

Made with ❤️ by RedCRAB

+
+ style={{ width: "100%", height: "auto", + padding: "10px"}}/>
) diff --git a/front/src/components/FstSection.tsx b/front/src/components/FstSection.tsx index 4a0908b..67bec8f 100644 --- a/front/src/components/FstSection.tsx +++ b/front/src/components/FstSection.tsx @@ -2,19 +2,12 @@ import Button from "./Button"; import ButtonLink from "./ButtonLink"; import NavBar from "./NavBar"; -interface FstSectionProps { - centertxt: string; - txtbt1:string; - txtbt2:string; - image:string; -} - -export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSectionProps) { +export default function FstSection () { return (
-

{centertxt}


+

Help us to save our oceans


- - +
) diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx index 4f1c35d..b5ebe21 100644 --- a/front/src/components/NavBar.tsx +++ b/front/src/components/NavBar.tsx @@ -4,14 +4,16 @@ import RoundButton from './RoundButton.tsx'; export default function NavBar(){ return ( -