diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 49818fc..39cabd7 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -6,8 +6,7 @@ import React from "react"; /* -------------------------------------------------------------------------- */ import Typography from "./typography/Typography"; import Heading from "./typography/Heading"; -import Link from "./Link"; - +import Link from "./typography/Link"; /* -------------------------------------------------------------------------- */ /* Props */ /* -------------------------------------------------------------------------- */ @@ -102,7 +101,7 @@ Card.CardAction = function CardCardAction({ }: CardActionProps) { return ( {children} diff --git a/src/components/FeaturedArticales.tsx b/src/components/FeaturedArticlesCards.tsx similarity index 72% rename from src/components/FeaturedArticales.tsx rename to src/components/FeaturedArticlesCards.tsx index 37eaef6..2052fa0 100644 --- a/src/components/FeaturedArticales.tsx +++ b/src/components/FeaturedArticlesCards.tsx @@ -12,12 +12,56 @@ import Typography from "./typography/Typography"; import SkeletonCard from "./SkeletonCard"; import AspectRatio from "./AspectRatio"; import Card from "./Card"; -import Link from "./Link"; +import Link from "./typography/Link"; /* -------------------------------------------------------------------------- */ -/* Data */ +/* Article mock data */ /* -------------------------------------------------------------------------- */ -import Articales from "./Articales.json"; + +const articles = [ + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "1 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.sit amet consectetur adipisicing elit.Consequuntur ma", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + CoverImg: + "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, +]; /* -------------------------------------------------------------------------- */ /* Icons */ @@ -42,22 +86,22 @@ import "swiper/css"; /* -------------------------------------------------------------------------- */ let twoCards: boolean = false; let threeCards: boolean = false; -console.log(`Number of cards ${Articales.length}`); -if (Articales.length == 2) { +console.log(`Number of cards ${articles.length}`); +if (articles.length == 2) { twoCards = true; -} else if (Articales.length == 3) { +} else if (articles.length == 3) { threeCards = true; } SwiperCore.use([Navigation]); -const FeaturedArticales = () => { +const FeaturedArticlesCards = () => { const navigationPrevRef = useRef(null); const navigationNextRef = useRef(null); const paginationRef = useRef(null); return ( -
+
{ loopFillGroupWithBlank={true} modules={[Pagination, Navigation]} > - {Articales.map((Articale) => ( + {articles.map((Articale) => ( @@ -124,7 +168,7 @@ const FeaturedArticales = () => { - + Read More @@ -185,4 +229,4 @@ const FeaturedArticales = () => { ); }; -export default FeaturedArticales; +export default FeaturedArticlesCards; diff --git a/src/components/FeaturedAuthors.tsx b/src/components/FeaturedAuthorsCards.tsx similarity index 76% rename from src/components/FeaturedAuthors.tsx rename to src/components/FeaturedAuthorsCards.tsx index c81a1d4..9de34fa 100644 --- a/src/components/FeaturedAuthors.tsx +++ b/src/components/FeaturedAuthorsCards.tsx @@ -18,9 +18,33 @@ import "./styles.css"; import "swiper/css"; /* -------------------------------------------------------------------------- */ -/* Authors */ +/* Authors data mock */ /* -------------------------------------------------------------------------- */ -import Authors from "./Authors.json"; +const authors = [ + { + Title: "JSON Three", + Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.", + Link: "http://pinterest.com", + }, + { + Title: "JSON Two", + Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam", + Link: "http://pinterest.com", + img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + }, + { + Title: "JSON Two", + Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam", + Link: "http://pinterest.com", + img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + }, + { + Title: "JSON Two", + Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam", + Link: "http://pinterest.com", + img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png", + }, +]; /* -------------------------------------------------------------------------- */ /* Icons */ @@ -38,17 +62,17 @@ SwiperCore.use([Navigation]); /* -------------------------------------------------------------------------- */ let twoCards: boolean = false; let threeCards: boolean = false; -console.log(`Number of cards ${Authors.length}`); -if (Authors.length == 2) { +console.log(`Number of cards ${authors.length}`); +if (authors.length == 2) { twoCards = true; -} else if (Authors.length == 3) { +} else if (authors.length == 3) { threeCards = true; } /** * Featured authors component to display ... */ -export default function FeaturedAuthors(): JSX.Element { +export default function FeaturedAuthorsCards(): JSX.Element { return (
{/* The Title of Featured Authors section */} @@ -60,7 +84,7 @@ export default function FeaturedAuthors(): JSX.Element { slidesPerView={1.25} slidesPerGroup={1} spaceBetween={25} - loop={Authors.length > 4 ? true : false} + loop={authors.length > 4 ? true : false} loopFillGroupWithBlank={false} breakpoints={{ 768: { @@ -81,7 +105,7 @@ export default function FeaturedAuthors(): JSX.Element { }, }} > - {Authors.map((card) => ( + {authors.map((card) => ( @@ -109,7 +133,9 @@ export default function FeaturedAuthors(): JSX.Element { - See More + + See More + diff --git a/src/components/parts/FeaturedArticles.tsx b/src/components/parts/FeaturedArticlesCategories.tsx similarity index 100% rename from src/components/parts/FeaturedArticles.tsx rename to src/components/parts/FeaturedArticlesCategories.tsx diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx index dcc3331..9697984 100644 --- a/src/components/parts/Footer.tsx +++ b/src/components/parts/Footer.tsx @@ -12,16 +12,26 @@ import Link from "components/typography/Link"; /* -------------------------------------------------------------------------- */ const mainLinks = [ - { label: "account settings", url: "/account/settings", enabled: true }, - { label: "about freeland", url: "/about", enabled: true }, - { label: "help", url: "/help", enabled: true }, - { label: "contact us", url: "/contact-us", enabled: true }, + { label: "account settings", url: "/account/settings", disabled: false }, + { label: "about freeland", url: "/about", disabled: false }, + { label: "help", url: "/help", disabled: false }, + { label: "contact us", url: "/contact-us", disabled: false }, ]; const secondaryLinks = [ - { index: 1, label: "Terms of Use", url: "/terms-of-use", enabled: true }, - { index: 2, label: "Privacy Policy", url: "/privacy-policy", enabled: true }, - { index: 3, label: "Cookies Policy", url: "/cookies-policy", enabled: true }, + { index: 1, label: "Terms of Use", url: "/terms-of-use", disabled: false }, + { + index: 2, + label: "Privacy Policy", + url: "/privacy-policy", + disabled: false, + }, + { + index: 3, + label: "Cookies Policy", + url: "/cookies-policy", + disabled: false, + }, ]; /* -------------------------------------------------------------------------- */ @@ -42,16 +52,16 @@ export function Footer() { const mainLinksPart = useMemo( () => mainLinks.map((link) => ( - {link.label.toUpperCase()} - + )), mainLinks ); @@ -61,9 +71,9 @@ export function Footer() { secondaryLinks.map((link) => (
{link.index != 1 && circleDivider} - + {link.label} - +
)), secondaryLinks @@ -76,20 +86,20 @@ export function Footer() {
- + Freeland - +
{mainLinksPart}
- + - + {" "} diff --git a/src/components/typography/Link.tsx b/src/components/typography/Link.tsx index 15a3eb8..184bbb7 100644 --- a/src/components/typography/Link.tsx +++ b/src/components/typography/Link.tsx @@ -1,21 +1,49 @@ import React from "react"; +import { NavLink, NavLinkProps } from "react-router-dom"; +import classNames from "classnames"; type Props = { - href?: string; + to: string; children: React.ReactNode; disabled?: boolean; className?: string; -} & Omit, "">; +} & NavLinkProps & + Omit, "">; -export default function Link({ href, children, disabled, ...props }: Props) { - return ( - // eslint-disable-next-line jsx-a11y/anchor-is-valid - - {children} - - ); +function getURL(to: string): URL { + try { + return new URL(to); + } catch { + let outurl = `${window.location.origin}${ + to.startsWith("/") ? to : "/" + to + }`; + return new URL(outurl); + } +} + +export default function Link({ + to, + children, + disabled, + className, + ...props +}: Props) { + const link = + getURL(to).hostname === window.location.hostname ? ( + + {children} + + ) : ( + + {children} + + ); + return
{link}
; } diff --git a/src/components/typography/RouterLink.tsx b/src/components/typography/RouterLink.tsx index 4b32e77..016e2f8 100644 --- a/src/components/typography/RouterLink.tsx +++ b/src/components/typography/RouterLink.tsx @@ -1,5 +1,5 @@ import classNames from "classnames"; -import { NavLink, NavLinkProps, To } from "react-router-dom"; +import { NavLink, NavLinkProps } from "react-router-dom"; type Props = { enabled?: boolean;