Skip to content

Commit bf6138c

Browse files
valentinpolitovvalentinpolitov
committed
feat: TypeScript
1 parent a090713 commit bf6138c

36 files changed

+802
-710
lines changed

components/authors.js renamed to components/authors.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
export default function Authors({ date, children, by = "by" }) {
1+
export default function Authors({
2+
date,
3+
children,
4+
by = "by",
5+
}: React.PropsWithChildren<{ date: string; by?: string }>) {
26
return (
37
<div className="mt-4 mb-16 text-gray-500 text-sm">
48
{date} {by} {children}
59
</div>
610
);
711
}
812

9-
export function Author({ name, link }) {
13+
export function Author({ name, link }: { name: string; link: string }) {
1014
return (
1115
<span className="after:content-[','] last:after:content-['']">
1216
<a
1317
key={name}
1418
href={link}
1519
target="_blank"
16-
// style={{ textUnderlinePosition: "under" }}
1720
className="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font"
1821
>
1922
{name}

‎components/blog-index.js‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎components/blog-index.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { FrontMatter, Page } from "nextra";
2+
import { getPagesUnderRoute } from "nextra/context";
3+
import Link from "next/link";
4+
5+
export default function BlogIndex({ more = "Read more" }: { more?: string }) {
6+
return getPagesUnderRoute("/blog").map(
7+
(page: Page & { frontMatter?: FrontMatter }) => {
8+
return (
9+
<div key={page.route} className="mb-10">
10+
<h3>
11+
<Link
12+
href={page.route}
13+
style={{ color: "inherit", textDecoration: "none" }}
14+
className="block font-semibold mt-8 text-2xl "
15+
>
16+
{page.meta?.title || page.frontMatter?.title || page.name}
17+
</Link>
18+
</h3>
19+
<p className="opacity-80 mt-6 leading-7">
20+
{page.frontMatter?.description}{" "}
21+
<span className="inline-block">
22+
<Link
23+
href={page.route}
24+
className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
25+
>
26+
{more + " →"}
27+
</Link>
28+
</span>
29+
</p>
30+
{page.frontMatter?.date ? (
31+
<p className="opacity-50 text-sm mt-6 leading-7">
32+
{page.frontMatter.date}
33+
</p>
34+
) : null}
35+
</div>
36+
);
37+
}
38+
);
39+
}

components/diagrams/cache.js renamed to components/diagrams/cache.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import useLocalesMap from "../use-locales-map";
22
import { diagramCachePathsMap } from "../../translations/svgs";
33

4-
export const Cache = () => {
4+
export const Cache: React.FC<React.SVGProps<SVGSVGElement>> = ({
5+
className,
6+
...props
7+
}) => {
58
const paths = useLocalesMap(diagramCachePathsMap);
9+
const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
610

711
return (
8-
<svg viewBox="0 0 588 311" fill="none" className="invert-on-dark">
12+
<svg viewBox="0 0 588 311" fill="none" className={cn} {...props}>
913
<path stroke="#D2D2D2" d="M22.5 59.5h543v232h-543z" />
1014
<path fill="#fff" d="M40 43h116v33H40z" />
1115
<path fill="#141414" d={paths.firstCacheProvider} />

components/diagrams/infinite.js renamed to components/diagrams/infinite.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import useLocalesMap from "../use-locales-map";
22
import { diagramInfinitePathMap } from "../../translations/svgs";
33

4-
export const Infinite = () => {
4+
export const Infinite: React.FC<React.SVGProps<SVGSVGElement>> = ({
5+
className,
6+
...props
7+
}) => {
58
const path = useLocalesMap(diagramInfinitePathMap);
9+
const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
610

711
return (
8-
<svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
12+
<svg viewBox="0 0 769 356" fill="none" className={cn} {...props}>
913
<path
1014
d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
1115
fill="white"

components/diagrams/pagination.js renamed to components/diagrams/pagination.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import useLocalesMap from "../use-locales-map";
22
import { diagramPaginationPathsMap } from "../../translations/svgs";
33

4-
export const Pagination = () => {
4+
export const Pagination: React.FC<React.SVGProps<SVGSVGElement>> = ({
5+
className,
6+
...props
7+
}) => {
58
const paths = useLocalesMap(diagramPaginationPathsMap);
9+
const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
610

711
return (
8-
<svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
12+
<svg viewBox="0 0 769 356" fill="none" className={cn} {...props}>
913
<path
1014
d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
1115
fill="white"

components/diagrams/welcome.js renamed to components/diagrams/welcome.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import useLocalesMap from "../use-locales-map";
22
import { diagramWelcomePathMap } from "../../translations/svgs";
33

4-
export const Welcome = () => {
4+
export const Welcome: React.FC<React.SVGProps<SVGSVGElement>> = ({
5+
className,
6+
...props
7+
}) => {
58
const path = useLocalesMap(diagramWelcomePathMap);
9+
const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
610

711
return (
8-
<svg fill="none" viewBox="0 0 769 193" className="invert-on-dark">
12+
<svg fill="none" viewBox="0 0 769 193" className={cn} {...props}>
913
<path fill="#fff" d="M0 0h768v193H0z" />
1014
<mask
1115
id="a"

‎components/features.js‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎components/features.module.css‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎components/features.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useId } from "react";
2+
import useLocalesMap from "./use-locales-map";
3+
import { type FeatureKey, featuresMap, titleMap } from "../translations/text";
4+
5+
import BackendAgnosticIcon from "./icons/backend-agnostic";
6+
import LightweightIcon from "./icons/lightweight";
7+
import PaginationIcon from "./icons/pagination";
8+
import RealtimeIcon from "./icons/realtime";
9+
import RemoteLocalIcon from "./icons/remote-local";
10+
import RenderingStrategiesIcon from "./icons/rendering-strategies";
11+
import SuspenseIcon from "./icons/suspense";
12+
import TypeScriptIcon from "./icons/typescript";
13+
14+
type Icon = React.FC<React.SVGProps<SVGSVGElement>>;
15+
16+
const FEATURE_ICONS: Record<FeatureKey, Icon> = {
17+
lightweight: LightweightIcon,
18+
realtime: RealtimeIcon,
19+
suspense: SuspenseIcon,
20+
pagination: PaginationIcon,
21+
backendAgnostic: BackendAgnosticIcon,
22+
renderingStrategies: RenderingStrategiesIcon,
23+
typescript: TypeScriptIcon,
24+
remoteLocal: RemoteLocalIcon,
25+
};
26+
27+
export default function Features() {
28+
const componentId = useId();
29+
const title = useLocalesMap(titleMap);
30+
const features = useLocalesMap(featuresMap);
31+
32+
return (
33+
<div className="mx-auto max-w-full w-[880px] text-center px-4 mb-10">
34+
<p className="text-lg mb-2 text-gray-600 md:!text-2xl">{title}</p>
35+
<div className="grid grid-cols-2 gap-y-4 gap-x-2 mt-10 mx-0 mb-8 sm:grid-cols-4 md:gap-x-8">
36+
{Object.entries(FEATURE_ICONS).map(
37+
([key, FeatureIcon]: [FeatureKey, Icon]) => (
38+
<div
39+
className="inline-flex justify-center items-center md:justify-start pl-0"
40+
key={componentId + key}
41+
>
42+
<FeatureIcon className="w-5 h-6 min-w-[20px] stroke-[2.5px] md:w-6" />
43+
<h4 className="text-sm my-0 mr-0 ml-2 font-bold whitespace-nowrap sm:text-[0.9rem] md:text-lg">
44+
{features[key]}
45+
</h4>
46+
</div>
47+
)
48+
)}
49+
</div>
50+
</div>
51+
);
52+
}

0 commit comments

Comments
 (0)