mirror of
https://github.com/jambonz/next-static-site.git
synced 2025-12-19 04:47:44 +00:00
e3cd0edeb6
* Initial refactor of jambonz-ui package library * Delete public/fonts directory * Jambonz UI test-app and some refinements * next lint * working on jambonz ui docs * Update package.json * Update package.json * Update package.json * Create package.json * typescript * Update components.tsx * Update components.tsx * Update utils.ts * Update icons.ts * Update components.tsx * Update components.tsx * Update icons.ts * Update components.tsx * Update _icons.scss * Update components.tsx * Update components.tsx * fix some thangs and compile all * wrap up the docs * Update tsconfig.json * icons refactor * refine docs * update readmes * update readme * fix props interfaces and test in TS app * Update components.tsx * button up some things * change package name... * include readme in pkg dist * use published package
92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import Link from 'next/link';
|
|
|
|
import { nanoid } from 'nanoid';
|
|
import { Icon, Button, H3, H2, P, ButtonGroup } from 'jambonz-ui';
|
|
|
|
import { getData } from '../src/lib/data';
|
|
import { Icons } from '../src/components/icons';
|
|
import Layout, { Hero } from '../src/components/layout';
|
|
|
|
function Facts({data}) {
|
|
return (
|
|
<section className="bg--pink facts">
|
|
<div className="wrap facts__wrap">
|
|
<div className="facts__items">
|
|
{data.map((fact) => {
|
|
const FactIcon = Icons[fact.icon];
|
|
return (
|
|
<div key={nanoid()} className="facts__item">
|
|
<Icon mainStyle="fill">
|
|
<FactIcon />
|
|
</Icon>
|
|
<div className="facts__text">
|
|
<P className="h5"><strong>{fact.title}</strong></P>
|
|
<P>{fact.text}</P>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function OS({data}) {
|
|
return (
|
|
<section className="os pad">
|
|
<div className="wrap os__wrap">
|
|
<div className="os__headline">
|
|
<H2>
|
|
<div dangerouslySetInnerHTML={{ __html: data.headline}} />
|
|
</H2>
|
|
</div>
|
|
<div className="os__subtext">
|
|
<H3 className="h5">{data.subtext}</H3>
|
|
</div>
|
|
<ButtonGroup className="os__btns">
|
|
{data.buttons.map((button) => {
|
|
const BtnIcon = Icons[button.icon];
|
|
return (
|
|
<Button as={Link} key={nanoid()} href={button.url} target="_blank" mainStyle="pill">
|
|
<BtnIcon />
|
|
<span>{button.text}</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</ButtonGroup>
|
|
<div className="os__logo">
|
|
<img src={data.logo} width="313" height="71" alt="drachtio" />
|
|
<Button as={Link} href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
|
|
<Icons.Heart />
|
|
<span>Sponsor</span>
|
|
</Button>
|
|
</div>
|
|
<div className="os__cta">
|
|
<Button as={Link} href={data.url} subStyle="dark" >{data.cta}</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function Why({ data }) {
|
|
return (
|
|
<Layout siteData={data.site}>
|
|
<Hero data={data.why.hero} subStyle="why" />
|
|
<Facts data={data.why.facts} />
|
|
<OS data={data.why.os} />
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
const data = getData('why');
|
|
|
|
return {
|
|
props: {
|
|
data,
|
|
},
|
|
};
|
|
}
|