mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-26 07:14:44 +02:00
Code Issues Releases Wiki Activity

Tweak the pattern page

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-30 15:39:49 +07:00
parent f334b7208d
commit 65eec005cb
4 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
client/layouts/DetailsLayout.tsx
View File

@@ -4,11 +4,13 @@
*/
import React from 'react';
import { Link } from 'react-router-dom';
import Ad from '../components/Ad';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from './Layout';
import Product from '../components/Product';
import { ProductList } from '../constants/ProductList';
import randomFromArray from '../helpers/randomFromArray';
interface DetailsLayoutProps {
title: string;
@@ -17,32 +19,27 @@ interface DetailsLayoutProps {
const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
useDocumentTitle(`CSS Layout ∙ ${title}`);
const product = randomFromArray(ProductList);
return (
<Layout>
<div className='flex sm:text-2xl p-4 xl:pl-0'>
<Link
to="/"
style={{
textDecoration: 'none',
}}
>
Home
</Link>
<span className='mx-2'>/</span>
<Link
to="/patterns"
style={{
textDecoration: 'none',
}}
>
Explore
</Link>
<span className='mx-2'>/</span>
<h1>{title}</h1>
<div className="hero">
<div className="container">
<h1 className="hero__heading">{title}</h1>
</div>
</div>
<div className='xl:border xl:border-gray-400'>
{children}
<Ad />
<div className="container">
<div className="content">
<main className="main">
{children}
</main>
<div className="sidebar">
<div className="sidebar__inner">
<Ad />
<Product product={product} />
</div>
</div>
</div>
</div>
</Layout>
);