Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated imports, mock authors and articles request, renamed files

Browse Source
This commit is contained in:
Maximus 2022-09-08 11:44:02 +03:00
parent d108e88c65
commit 956109f34a
6 changed files with 120 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Card.tsx
View File

@ -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 (
<Link
href={href}
to={href}
className={classNames([className, "flex items-center gap-2"])}
>
{children}

68
src/components/FeaturedArticales.tsx → src/components/FeaturedArticlesCards.tsx
View File

@ -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 (
<div className="slider-wrapper Articales">
<div className="slider-wrapper articles">
<div className="flex justify-end gap-2 my-2">
<div
className="prev inline-flex justify-center items-center
@ -80,7 +124,7 @@ const FeaturedArticales = () => {
<Swiper
slidesPerView={1.25}
slidesPerGroup={1}
loop={Articales.length > 4 ? true : false}
loop={articles.length > 4 ? true : false}
pagination={{ el: ".pagination", clickable: true }}
navigation={{
prevEl: ".prev",
@ -108,7 +152,7 @@ const FeaturedArticales = () => {
loopFillGroupWithBlank={true}
modules={[Pagination, Navigation]}
>
{Articales.map((Articale) => (
{articles.map((Articale) => (
<SwiperSlide>
<Card className="flex-1">
<Card.CardContent>
@ -124,7 +168,7 @@ const FeaturedArticales = () => {
</Card.CardContent>
<Card.CardAction href={Articale.Link}>
<Link>
<Link to="*">
<Typography className="text-blue-500 font-bold">
Read More
</Typography>
@ -185,4 +229,4 @@ const FeaturedArticales = () => {
);
};
export default FeaturedArticales;
export default FeaturedArticlesCards;

44
src/components/FeaturedAuthors.tsx → src/components/FeaturedAuthorsCards.tsx
View File

@ -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 (
<div>
{/* 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) => (
<SwiperSlide>
<Card className="flex-1">
<Card.CardContent>
@ -109,7 +133,9 @@ export default function FeaturedAuthors(): JSX.Element {
</Card.CardContent>
<Card.CardAction href={card.Link}>
<Link className="text-blue-500 font-bold ">See More</Link>
<Link className="text-blue-500 font-bold" to="*">
See More
</Link>
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
</Card.CardAction>
</Card>

0
src/components/parts/FeaturedArticles.tsx → src/components/parts/FeaturedArticlesCategories.tsx
View File

42
src/components/parts/Footer.tsx
View File

@ -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) => (
<RouterLink
<Link
key={link.url}
className="py-1 md:py-2 text-gray-900 px-4"
enabled={link.enabled}
disabled={link.disabled}
to={link.url}
>
<Typography className="" fontWeightVariant="semibold" htmlTag="p">
{link.label.toUpperCase()}
</Typography>
</RouterLink>
</Link>
)),
mainLinks
);
@ -61,9 +71,9 @@ export function Footer() {
secondaryLinks.map((link) => (
<div className="flex flex-row items-center">
{link.index != 1 && circleDivider}
<RouterLink key={link.url} enabled={link.enabled} to={link.url}>
<Link key={link.url} disabled={link.disabled} to={link.url}>
{link.label}
</RouterLink>
</Link>
</div>
)),
secondaryLinks
@ -76,20 +86,20 @@ export function Footer() {
<div className="lg:px-12 px-2 sm:px-8 md:px-4 pb-2 md:pt-4 pt-2 lg:pt-5 bg-gray-200">
<section className="w-full grid grid-cols-2 md:grid-rows-2 sm:grid-flow-row-dense sm:grid-rows-2 justify-items-between md:justify-between mb-2 md: items-center md:flex-row md:flex">
<div className="sm:col-span-1">
<RouterLink to="/">
<Link to="*">
<Typography className="text-2xl" fontWeightVariant="semibold">
Freeland
</Typography>
</RouterLink>
</Link>
</div>
<div className="order-last md:order-none justify-center justify-items-center items-center flex flex-col col-span-4 sm:flex sm:flex-row text-sm">
{mainLinksPart}
</div>
<div className="flex flex-row sm:col-span-1 justify-end">
<Link href="https://www.facebook.com">
<Link to="https://www.facebook.com">
<SVGFacebook className="w-5 h-5 fill-gray-900 stroke-gray-900 mr-2" />
</Link>
<Link href="https://www.instagram/com">
<Link to="https://www.instagram/com">
{" "}
<SVGInstagram className="w-5 h-5 fill-gray-900 stroke-gray-900 ml-2 " />
</Link>

2
src/components/typography/RouterLink.tsx
View File

@ -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;