ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-10-04 02:04:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

svg placeholder for Icon component

Browse Source
This commit is contained in:
kitajchuk
2022-06-13 09:05:42 -07:00
parent e90b44a384
commit 2c705ae588
2 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/jambonz-ui.js
+6 -6
View File
@@ -17,9 +17,9 @@ export default function JambonzUI({ data }) {
<div>Jambonz UI</div> <div>Jambonz UI</div>
<div>&nbsp;</div> <div>&nbsp;</div>
</H1> </H1>
<H5> <H2 className="h5">
<div><strong>font</strong></div> <div><strong>font</strong></div>
<div>Objectivity (free, large family—16 styles)</div> <div>Objectivity (os, large family—16 styles)</div>
<div> <div>
<Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family"> <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
<a className="i" target="_blank"> <a className="i" target="_blank">
@@ -38,7 +38,7 @@ export default function JambonzUI({ data }) {
</div> </div>
<div>&nbsp;</div> <div>&nbsp;</div>
<div><strong>icons</strong></div> <div><strong>icons</strong></div>
<div>Feather (free, large set—286 icons)</div> <div>Feather (os, large set—286 icons)</div>
<div> <div>
<Link href="https://feathericons.com"> <Link href="https://feathericons.com">
<a className="i" target="_blank"> <a className="i" target="_blank">
@@ -55,7 +55,7 @@ export default function JambonzUI({ data }) {
</a> </a>
</Link> </Link>
</div> </div>
</H5> </H2>
</div> </div>
</Hero> </Hero>
{/* Show black background style */} {/* Show black background style */}
@@ -109,7 +109,7 @@ export default function JambonzUI({ data }) {
<MXS>{pageData.text}</MXS> <MXS>{pageData.text}</MXS>
</div> </div>
<div className="pad"> <div className="pad">
<img src="/images/Jambonz_app_screenshot.png" /> <img src="/images/Jambonz_app_screenshot.webp" width="1280" height="842" alt="jambonz node-red screenshot" />
</div> </div>
<div className="pad"> <div className="pad">
<div className="icons"> <div className="icons">
@@ -127,7 +127,7 @@ export default function JambonzUI({ data }) {
</div> </div>
</div> </div>
<div className="pad"> <div className="pad">
<img src="/svg/drachtio.svg" width="128" /> <img src="/svg/drachtio.svg" width="313" height="71" alt="drachtio" />
</div> </div>
<div className="pad"> <div className="pad">
<Button href="#" mainStyle="login">Log In</Button> <Button href="#" mainStyle="login">Log In</Button>
src/components/jambonz-ui.js
+3 -6
View File
@@ -175,6 +175,7 @@ export function Button({ children, href, mainStyle = 'fill', subStyle = null, ..
// https://github.com/feathericons/react-feather // https://github.com/feathericons/react-feather
export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) { export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) {
const [Icons, setIcons] = useState({}); const [Icons, setIcons] = useState({});
const svgPlaceholder = <svg width="24" height="24" />;
// Lazy load react-feather as it's own webpack chunk // Lazy load react-feather as it's own webpack chunk
useEffect(() => { useEffect(() => {
@@ -193,21 +194,17 @@ export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props })
classes[`icon--${mainStyle}--${subStyle}`] = true; classes[`icon--${mainStyle}--${subStyle}`] = true;
} }
if (!Component) {
return null;
}
// Stylized icon // Stylized icon
if (mainStyle !== 'inline') { if (mainStyle !== 'inline') {
return ( return (
<div className={classNames(classes)}> <div className={classNames(classes)}>
<Component {...props} /> {Component ? <Component {...props} /> : svgPlaceholder}
</div> </div>
); );
} }
// Inline icon // Inline icon
return <Component {...props} />; return Component ? <Component {...props} /> : svgPlaceholder;
} }
export function TextLayout({ data, name }) { export function TextLayout({ data, name }) {