handoff-app/src/app/pages/assets/logos.tsx at 92e8f9db797cce9157ee29915fd3753fb32b257e · Convertiv/handoff-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { FileArchive } from 'lucide-react';
import type { GetStaticProps } from 'next';
import Head from 'next/head';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import Footer from '../../components/Footer';
import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
import Header from '../../components/old/Header';
import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';

/**
 * This statically renders content from the markdown, creating menu and providing
 * metadata
 *
 * This is all done statically at build time
 * @param context GetStaticProps
 * @returns
 */
export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {
      ...fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`).props,
      config: getClientRuntimeConfig(),
    },
  };
};

const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps) => {
  return (
    <div className="c-page">
      <Head>
        <title>{metadata.metaTitle}</title>
        <meta name="description" content={metadata.metaDescription} />
      </Head>
      <Header menu={menu} config={config} />
      <section className="c-content">
        <div className="o-container-fluid">
          <div className="c-hero">
            <div>
              <h1>{metadata.title}</h1>
              <p>{metadata.description}</p>
            </div>
          </div>
          <div className="o-row u-justify-between">
            <div className="o-col-5@md">
              <h4>{config?.app?.client} Logo</h4>
            </div>
            <div className="o-col-6@md">
              <div className="c-card">
                <FileArchive />
                <h4>{config?.app?.client} Logo</h4>
                <p>Vector files of approved {config?.app?.client} logos.</p>
                <p>
                  <a href={config?.assets_zip_links?.logos ?? '/logos.zip'}>Download Logos</a>
                </p>
              </div>
            </div>
          </div>
          <div className="prose">
            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
              {content}
            </ReactMarkdown>
          </div>
          <hr />
        </div>
      </section>
      <Footer config={config} />
    </div>
  );
};
export default AssetsLogosPage;