Skip to content

Commit

Permalink
Fix some keys and typing
Browse files Browse the repository at this point in the history
  • Loading branch information
@razzeee
razzeee committed Oct 14, 2023
1 parent dafe50f commit 6c68bb4
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 132 deletions.
1 change: 1 addition & 0 deletions src/components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface Props {
imgsrc?: string;
imgalt?: string;
url?: string;
children?: React.ReactNode;
}

class Card extends React.Component<Props> {
Expand Down
128 changes: 20 additions & 108 deletions src/components/FullWidth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,9 @@ function FullWidthTwoPaneIconsRight(props: {
>
{props.title}
</h2>
<p className={"mt-4 text-lg " + subtextColor}>{props.children}</p>
<div className={"mt-4 text-lg " + subtextColor}>
{props.children}
</div>
<div className="mt-6">
<Button href={props.url}>{props.buttontext}</Button>
</div>
Expand Down Expand Up @@ -307,8 +309,11 @@ function FullWidthSponsorList(props: {
{props.title}
</p>
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-6">
{props.sponsors.map((sponsor, index) => (
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1 filter grayscale transition duration-500 ease-in-out hover:filter-none">
{props.sponsors.map(sponsor => (
<div
key={sponsor.slug}
className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1 filter grayscale transition duration-500 ease-in-out hover:filter-none"
>
<a href={sponsor.slug} target="_blank" rel="noreferrer">
<img
className="h-12"
Expand All @@ -326,82 +331,6 @@ function FullWidthSponsorList(props: {
);
}

function FullWidthCTAImageLeft(props: {
backgroundColor: string | undefined;
titleTextColor: string | undefined;
bodyTextColor: string | undefined;
buttonType: "primary" | "secondary";
image: {
src: string | undefined;
title: string | undefined;
alt: string | undefined;
};
title: string;
children:
| boolean
| React.ReactChild
| React.ReactFragment
| React.ReactPortal
| null
| undefined;
url: string;
buttontext: string;
}) {
let backgroundColor = "bg-gray-800";
let titleTextColor = "text-gray-50";
let bodyTextColor = "text-gray-300";
let buttonType: "primary" | "secondary" = "secondary";
if (props.backgroundColor != undefined) {
backgroundColor = props.backgroundColor;
}
if (props.titleTextColor != undefined) {
titleTextColor = props.titleTextColor;
}
if (props.bodyTextColor != undefined) {
bodyTextColor = props.bodyTextColor;
}
if (props.buttonType != undefined) {
buttonType = props.buttonType;
}
return (
<>
<div className={"relative " + backgroundColor}>
<div className="h-56 md:absolute md:left-0 md:h-full md:w-1/2">
<img
className="w-full h-full object-cover"
src={props.image.src}
title={props.image.title}
alt={props.image.alt}
/>
<div
className="absolute inset-0 bg-kodibg-lighter"
style={{ mixBlendMode: "multiply" }}
></div>
</div>
<div className="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<div className="md:ml-auto md:w-1/2 md:pl-10">
<h2
className={
"mt-2 text-4xl font-extrabold tracking-tight " + titleTextColor
}
>
{props.title}
</h2>
<p className={"mt-3 text-lg " + bodyTextColor}>{props.children}</p>
<div className="mt-8">
<div className="inline-flex rounded-md shadow">
<Button href={props.url} variant={buttonType}>
{props.buttontext}
</Button>
</div>
</div>
</div>
</div>
</div>
</>
);
}

function FullWidthNews(props: {
backgroundColor: string | undefined;
titleTextColor?: string;
Expand Down Expand Up @@ -451,8 +380,8 @@ function FullWidthNews(props: {
</p>
</div>
<div className="mt-12 max-w-lg mx-auto grid gap-5 grid-cols-1 md:max-w-none md:grid-cols-2 lg:grid-cols-3">
{props.news.map((news: News, index: any) => (
<BlogPostCard post={news} />
{props.news.map(news => (
<BlogPostCard key={news.fields.slug} post={news} />
))}
</div>
</div>
Expand Down Expand Up @@ -536,7 +465,7 @@ function FullWidthRoundedCardList(props: {
items: {
imgsrc: string;
title: string;
description: string;
description: React.ReactNode;
}[];
}) {
let backgroundColor = "bg-gray-50";
Expand Down Expand Up @@ -573,31 +502,15 @@ function FullWidthRoundedCardList(props: {
</p>
</div>
<div className="mt-12 max-w-lg mx-auto grid gap-5 grid-cols-1 md:max-w-none md:grid-cols-2 lg:grid-cols-3">
{props.items.map(
(
item: {
title: any;
imgsrc: any;
description:
| boolean
| React.ReactChild
| React.ReactFragment
| React.ReactPortal
| null
| undefined;
},
index: any
) => (
<RoundedCardWithImage
title={item.title}
imgsrc={item.imgsrc}
imgalt=""
imgtitle=""
>
{item.description}
</RoundedCardWithImage>
)
)}
{props.items.map(item => (
<RoundedCardWithImage
title={item.title}
imgsrc={item.imgsrc}
key={item.title}
>
{item.description}
</RoundedCardWithImage>
))}
</div>
</div>
</div>
Expand All @@ -611,7 +524,6 @@ export {
FullWidthTwoPaneIconsRight,
FullWidthTwoPaneImageLeft,
FullWidthSponsorList,
FullWidthCTAImageLeft,
FullWidthNews,
FullWidthStats,
FullWidthRoundedCardList,
Expand Down
3 changes: 2 additions & 1 deletion src/components/IconList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ function IconListFeatured(props: {
return (
<>
<div className={className}>
{items.map((item, index) => (
{items.map(item => (
<FeaturedCard
key={item.name}
iconClass={
"-mt-12 flex items-center justify-center h-24 w-24 rounded-md border bg-gray-50"
}
Expand Down
25 changes: 9 additions & 16 deletions src/components/Pager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,22 +67,15 @@ const Pager = ({ pageContext }) => {
</Link>
{paginationinfo.map((info: any, index: any) => {
return (
<>
<Link
style={{ display: info.onpage ? "none" : "block" }}
to={info.url}
className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
{info.pagenum}
</Link>
<Link
style={{ display: info.onpage ? "block" : "none" }}
to={info.url}
className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-kodi text-sm font-medium text-gray-50 hover:bg-gray-50"
>
{info.pagenum}
</Link>
</>
<Link
key={index}
to={info.url}
className={`relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium hover:bg-gray-50 ${
info.onpage ? "bg-kodi text-gray-50" : "text-gray-700 bg-gray-50"
}`}
>
{info.pagenum}
</Link>
);
})}
<Link
Expand Down
15 changes: 8 additions & 7 deletions src/templates/blog-index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { graphql } from "gatsby";
import Pager from "../components/Pager";
import { DefaultLayout } from "../components/Layout";
import { BlogPostCard, NavCard, EmptyCard } from "../components/Blog";
import { News } from "../hooks/LatestNews";

export default function BlogIndexPage({ data, pageContext, location }) {
let frontmatter = {
Expand All @@ -11,25 +12,25 @@ export default function BlogIndexPage({ data, pageContext, location }) {
description:
"Get information about new releases, test builds, and other news from Team Kodi.",
};
let posts = data.blogPosts.nodes;
let posts = data.blogPosts.nodes as News[];
let firsttwo = posts.slice(0, 2);
let therest = posts.slice(2);
return (
<DefaultLayout frontmatter={frontmatter}>
<div className="mt-12 max-w-lg mx-auto gap-5 hidden lg:grid lg:grid-cols-3 lg:max-w-none">
{firsttwo.map((post, index) => (
<BlogPostCard post={post} />
{firsttwo.map(post => (
<BlogPostCard key={post.fields.slug} post={post} />
))}
{firsttwo.length == 1 ? <EmptyCard /> : ""}
<NavCard />
{therest.map((post, index) => (
<BlogPostCard post={post} />
{therest.map(post => (
<BlogPostCard key={post.fields.slug} post={post} />
))}
</div>
<div className="mt-12 max-w-lg mx-auto gap-5 grid lg:hidden">
<NavCard />
{posts.map((post, index) => (
<BlogPostCard post={post} />
{posts.map(post => (
<BlogPostCard key={post.fields.slug} post={post} />
))}
</div>
{pageContext == undefined ? "" : <Pager pageContext={pageContext} />}
Expand Down

0 comments on commit 6c68bb4

Please sign in to comment.