Design system.
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.

index.tsx 2.9 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import type {GetStaticProps, NextPage} from 'next';
  2. import Link from 'next/link';
  3. import * as fs from 'fs/promises';
  4. import * as path from 'path';
  5. import * as Navigation from '@tesseract-design/web-navigation-react';
  6. import { DefaultLayout } from '@/components/DefaultLayout';
  7. import * as React from 'react'
  8. import {Section} from '@/components/Section';
  9. type Page = {
  10. id: string,
  11. href: string,
  12. label: string,
  13. }
  14. type Props = {
  15. componentPages: Page[],
  16. examplePages: Page[],
  17. }
  18. const createPageLink = (p: Page) => (
  19. <div
  20. key={p.id}
  21. >
  22. <Navigation.LinkButton
  23. block
  24. variant="outline"
  25. menuItem
  26. component={Link}
  27. href={p.href}
  28. >
  29. {p.label}
  30. </Navigation.LinkButton>
  31. </div>
  32. )
  33. const IndexPage: NextPage<Props> = ({
  34. componentPages,
  35. examplePages,
  36. }) => {
  37. return (
  38. <DefaultLayout
  39. title="Kitchen Sink"
  40. >
  41. <Section title="Components">
  42. <div className="grid md:grid-cols-2 gap-4 my-4">
  43. {componentPages.map(createPageLink)}
  44. </div>
  45. </Section>
  46. <Section title="Examples">
  47. <div className="grid md:grid-cols-2 gap-4 my-4">
  48. {examplePages.map(createPageLink)}
  49. </div>
  50. </Section>
  51. </DefaultLayout>
  52. )
  53. }
  54. export const getStaticProps: GetStaticProps = async () => {
  55. const pagesPath = path.resolve('src/pages');
  56. const categoriesPath = path.resolve(pagesPath, 'categories');
  57. const categoriesRaw = await fs.readdir(categoriesPath);
  58. const categoriesIndexPage = await Promise.all(
  59. categoriesRaw.map(async (c) => {
  60. const indexPath = await path.resolve(categoriesPath, c, 'index.tsx');
  61. try {
  62. const statResult = await fs.stat(indexPath);
  63. return [c, statResult.isFile()];
  64. } catch {
  65. // noop
  66. }
  67. return [c, false];
  68. })
  69. ) as [string, boolean][];
  70. const categories = categoriesIndexPage
  71. .filter(([, hasIndexPage]) => hasIndexPage)
  72. .map(([key]) => key);
  73. const examplesPath = path.resolve(pagesPath, 'examples');
  74. const examplesRaw = await fs.readdir(examplesPath);
  75. const examplesIndexPage = await Promise.all(
  76. examplesRaw.map(async (c) => {
  77. const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
  78. try {
  79. const statResult = await fs.stat(indexPath);
  80. return [c, statResult.isFile()];
  81. } catch {
  82. // noop
  83. }
  84. return [c, false];
  85. })
  86. ) as [string, boolean][];
  87. const examples = examplesIndexPage
  88. .filter(([, hasIndexPage]) => hasIndexPage)
  89. .map(([key]) => key);
  90. return {
  91. props: {
  92. componentPages: categories.map((c) => ({
  93. id: c,
  94. href: `/categories/${c}`,
  95. label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
  96. })),
  97. examplePages: examples.map((e) => ({
  98. id: e,
  99. href: `/examples/${e}`,
  100. label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
  101. })),
  102. },
  103. };
  104. };
  105. export default IndexPage