VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(shared): Moved breadcrumbs to shared component

Browse source
This commit is contained in:
Joost De Cock 2022-05-31 10:12:54 +02:00
parent 963e61ab28
commit 2f7d6e4505
6 changed files with 77 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

56
packages/freesewing.org/components/wrappers/layout.js
View file

@ -1,65 +1,9 @@
import React from 'react'
import { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
// Shared components
import Logo from 'shared/components/logos/freesewing.js'
import PrimaryNavigation from 'shared/components/navigation/primary'
import get from 'lodash.get'
import Right from 'shared/components/icons/right.js'
import Left from 'shared/components/icons/left.js'
// Site components
import Header from 'site/components/header'
import Footer from 'site/components/footer'
import Search from 'site/components/search'
const PageTitle = ({ app, slug, title }) => {
if (title) return <h1>{title}</h1>
if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
return <h1>FIXME: This page has no title</h1>
}
const Breadcrumbs = ({ app, slug=false, title }) => {
if (!slug) return null
const crumbs = []
const chunks = slug.split('/')
for (const i in chunks) {
const j = parseInt(i)+parseInt(1)
const page = get(app.navigation, chunks.slice(0,j))
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
}
return (
<ul className="flex flex-row flex-wrap gap-2 font-bold">
<li>
<Link href="/">
<a title="To the homepage" className="text-base-content">
<Logo size={24} fill="currentColor" stroke={false}/>
</a>
</Link>
</li>
{crumbs.map(crumb => (
<React.Fragment key={crumb[1]}>
<li className="text-base-content">&raquo;</li>
<li>
{crumb[2]
? (
<Link href={crumb[1]}>
<a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
{crumb[0]}
</a>
</Link>
)
: <span className="text-base-content">{crumb[0]}</span>
}
</li>
</React.Fragment>
))}
</ul>
)
}
const LayoutWrapper = ({
app,
title=false,