mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
* changes * Progress * Normalized Products output * Progress * Restored Index Agnostic * Progress * Reordering * Moved normalizer to BC function * Removed Futures * More Types * More Types * More Types * Fix useCallback * Progress, Changes types, readme and restoring functionality * Changes * TS Issues * Changes * Normalizer * Normalizing more operations * Normalizing more operations * changes * Merge Issues * Cleanup * change * changes * index.ts broke my tree shaking * slug * Normalized Options and Swatches * Restored Add to cart * Correct Variant Added to Cart * Normalizing Cart Responses * Changes * changes breaking * Adding immutable normalizer for Product * Cart Normalized * changes * Progress * More updates * Removed some comments * Add loading state for data hooks * Bug fix * Changed the way isEmpty works * Improve navbar performance * Added useResponse hook * added useResponse to useWhishlist * Added husky and lint-staged * Ran prettier fix * Added more cart types * Moved types.d.ts to the commerce folder * Minor changes * Moved normalizer to happen after fetch * updated useCart types * Updated normalizer for useData * Added new normalizer for the cart to the UI * More corrections for useCart * Updated cart update hooks * Removed import * Progress * Switch away from global types * Making multiple changes * Improved types for operations * Moved and updated cart types * Updated the useAddItem and useRemoveItem hooks * Minor life improvement * Minor change * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * userAvatar * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * MOving stuff around and adding temporal new files * changes * Replace use-cart with the new hook * Removed old hook * Improved HookHandler type * Moved types * Simplified useData types * Updated Fetcher type * Moved SwrOptions type * Removed duplicated fetcher * Moved provider to its own file * Added proper type for fetch input * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7c2d48d30e74ad94216f9910650fadf30c, reversing changes made to bf50965a39ef0b1b956461ebe62070809fbe1d63. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1bce0572d0eff41f3af893be8bdb00bedd. * align with upstream changes * Updated how the hook input is handled * Add more options to the hook handler * Final touches to the hook handler type * Moved useWishlist to use new handler * Move useCustomer to the new hook * Added a default fetcher * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * Shopify Provider (#186) * Start of Shopify provider * add missing comment to documentation * add missing env vars to documentation * update reference to types file * Moved useSearch to the new hook * Removed old use-data lib * Removed generics for result and body * Removed normalizr * Wishlist * New changes and initial Features API * Fixed some types * Fixed more types * fixes after upstream changes * Fixed product types * Fixed another product type * Updated type * Fixed remaining issues with types * Added a MutationHandler * Moved the handlers to each hook * Moved the fetcher to its own file * Moved handler to each hook * Added initial version of useAddItem * Added better mutation types, and moved some hooks * Removed use-cart-actions * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * changes * Changes * Reordering and changes * Adding Features APO * Adding wishlist api * Implementing FeaturesAPI with Wishlist * Removing bug with touchstart * Adding tyni typing * moved use-remove-item * Removed MutationHandler type * Moved more hooks and updated types to make them smaller * Moved data hooks to new format * Removed no longer required types * Removed useResponse helper * Updated useData type * Moved wishlist use-add-item * Moved wishlist use-remove-item to provider * Moved use-login and use-logout * Update use-signup * Removed use-action helper * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Updates to wishlist feature * Moved the features to be environment variable only * More changes for wishlist config * Disable wishlist * Removed useWishlistActions * Updated readme * updates * typos * Updated the way the provider config is set * Removed features.ts * Removed bootstrap.js * Aligned with upstream changes * Updates * shopify: changes * shopify: changes * Update next.config.js * Shopify Provider Updates (#209) * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * changes * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7c2d48d30e74ad94216f9910650fadf30c, reversing changes made to bf50965a39ef0b1b956461ebe62070809fbe1d63. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1bce0572d0eff41f3af893be8bdb00bedd. * align with upstream changes * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * fixes after upstream changes * Moved handler to each hook * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Aligned with upstream changes * Updates * Update next.config.js * Updated the commerce config structure * Removed @framework imports within framework providers * Fixed types * changes * Adding extra config * Adding shopify commit * Adding env templates to the providers * Ignore some types * Adding link for Cart * Adding customCheckout * multiple changes to fix the wishlist * Shopify Provier Updates (#212) * changes * Adding shopify commit * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json Co-authored-by: okbel <curciobel@gmail.com> * Bump and adding dependency * Adding color checks * Now colors work with lighter colors * Stable commerce.config.json * Updated main readme * Readme changes * Default to bigcommerce Co-authored-by: bc <bc@bcs-MacBook-Pro.fibertel.com.ar> Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: cond0r <pinte_catalin@yahoo.com> Co-authored-by: Peter Mekhaeil <4616064+petermekhaeil@users.noreply.github.com>
473 lines
18 KiB
TypeScript
473 lines
18 KiB
TypeScript
import cn from 'classnames'
|
|
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { Layout } from '@components/common'
|
|
import { ProductCard } from '@components/product'
|
|
import { Container, Grid, Skeleton } from '@components/ui'
|
|
|
|
import { getConfig } from '@framework/api'
|
|
import useSearch from '@framework/product/use-search'
|
|
import getAllPages from '@framework/common/get-all-pages'
|
|
import getSiteInfo from '@framework/common/get-site-info'
|
|
|
|
import rangeMap from '@lib/range-map'
|
|
|
|
// TODO(bc) Remove this. This should come from the API
|
|
import getSlug from '@lib/get-slug'
|
|
|
|
// TODO (bc) : Remove or standarize this.
|
|
const SORT = Object.entries({
|
|
'latest-desc': 'Latest arrivals',
|
|
'trending-desc': 'Trending',
|
|
'price-asc': 'Price: Low to high',
|
|
'price-desc': 'Price: High to low',
|
|
})
|
|
|
|
import {
|
|
filterQuery,
|
|
getCategoryPath,
|
|
getDesignerPath,
|
|
useSearchMeta,
|
|
} from '@lib/search'
|
|
import { Product } from '@commerce/types'
|
|
|
|
export async function getStaticProps({
|
|
preview,
|
|
locale,
|
|
}: GetStaticPropsContext) {
|
|
const config = getConfig({ locale })
|
|
const { pages } = await getAllPages({ config, preview })
|
|
const { categories, brands } = await getSiteInfo({ config, preview })
|
|
return {
|
|
props: {
|
|
pages,
|
|
categories,
|
|
brands,
|
|
},
|
|
}
|
|
}
|
|
|
|
export default function Search({
|
|
categories,
|
|
brands,
|
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
|
const [activeFilter, setActiveFilter] = useState('')
|
|
const [toggleFilter, setToggleFilter] = useState(false)
|
|
|
|
const router = useRouter()
|
|
const { asPath } = router
|
|
const { q, sort } = router.query
|
|
// `q` can be included but because categories and designers can't be searched
|
|
// in the same way of products, it's better to ignore the search input if one
|
|
// of those is selected
|
|
const query = filterQuery({ sort })
|
|
|
|
const { pathname, category, brand } = useSearchMeta(asPath)
|
|
const activeCategory = categories.find(
|
|
(cat) => getSlug(cat.path) === category
|
|
)
|
|
const activeBrand = brands.find(
|
|
(b) => getSlug(b.node.path) === `brands/${brand}`
|
|
)?.node
|
|
|
|
const { data } = useSearch({
|
|
search: typeof q === 'string' ? q : '',
|
|
// TODO: Shopify - Fix this type
|
|
categoryId: activeCategory?.entityId as any,
|
|
// TODO: Shopify - Fix this type
|
|
brandId: (activeBrand as any)?.entityId,
|
|
sort: typeof sort === 'string' ? sort : '',
|
|
})
|
|
|
|
const handleClick = (event: any, filter: string) => {
|
|
if (filter !== activeFilter) {
|
|
setToggleFilter(true)
|
|
} else {
|
|
setToggleFilter(!toggleFilter)
|
|
}
|
|
setActiveFilter(filter)
|
|
}
|
|
|
|
return (
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
|
|
<div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
|
|
{/* Categories */}
|
|
<div className="relative inline-block w-full">
|
|
<div className="lg:hidden">
|
|
<span className="rounded-md shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => handleClick(e, 'categories')}
|
|
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
|
id="options-menu"
|
|
aria-haspopup="true"
|
|
aria-expanded="true"
|
|
>
|
|
{activeCategory?.name
|
|
? `Category: ${activeCategory?.name}`
|
|
: 'All Categories'}
|
|
<svg
|
|
className="-mr-1 ml-2 h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
|
activeFilter !== 'categories' || toggleFilter !== true
|
|
? 'hidden'
|
|
: ''
|
|
}`}
|
|
>
|
|
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
|
<div
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="options-menu"
|
|
>
|
|
<ul>
|
|
<li
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
underline: !activeCategory?.name,
|
|
}
|
|
)}
|
|
>
|
|
<Link
|
|
href={{ pathname: getCategoryPath('', brand), query }}
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'categories')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
All Categories
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
{categories.map((cat) => (
|
|
<li
|
|
key={cat.path}
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
underline:
|
|
activeCategory?.entityId === cat.entityId,
|
|
}
|
|
)}
|
|
>
|
|
<Link
|
|
href={{
|
|
pathname: getCategoryPath(cat.path, brand),
|
|
query,
|
|
}}
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'categories')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
{cat.name}
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Designs */}
|
|
<div className="relative inline-block w-full">
|
|
<div className="lg:hidden mt-3">
|
|
<span className="rounded-md shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => handleClick(e, 'brands')}
|
|
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
|
id="options-menu"
|
|
aria-haspopup="true"
|
|
aria-expanded="true"
|
|
>
|
|
{activeBrand?.name
|
|
? `Design: ${activeBrand?.name}`
|
|
: 'All Designs'}
|
|
<svg
|
|
className="-mr-1 ml-2 h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
|
activeFilter !== 'brands' || toggleFilter !== true
|
|
? 'hidden'
|
|
: ''
|
|
}`}
|
|
>
|
|
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
|
<div
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="options-menu"
|
|
>
|
|
<ul>
|
|
<li
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
underline: !activeBrand?.name,
|
|
}
|
|
)}
|
|
>
|
|
<Link
|
|
href={{
|
|
pathname: getDesignerPath('', category),
|
|
query,
|
|
}}
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'brands')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
All Designers
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
{brands.flatMap(({ node }) => (
|
|
<li
|
|
key={node.path}
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
// @ts-ignore Shopify - Fix this types
|
|
underline: activeBrand?.entityId === node.entityId,
|
|
}
|
|
)}
|
|
>
|
|
<Link
|
|
href={{
|
|
pathname: getDesignerPath(node.path, category),
|
|
query,
|
|
}}
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'brands')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
{node.name}
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Products */}
|
|
<div className="col-span-8 order-3 lg:order-none">
|
|
{(q || activeCategory || activeBrand) && (
|
|
<div className="mb-12 transition ease-in duration-75">
|
|
{data ? (
|
|
<>
|
|
<span
|
|
className={cn('animated', {
|
|
fadeIn: data.found,
|
|
hidden: !data.found,
|
|
})}
|
|
>
|
|
Showing {data.products.length} results{' '}
|
|
{q && (
|
|
<>
|
|
for "<strong>{q}</strong>"
|
|
</>
|
|
)}
|
|
</span>
|
|
<span
|
|
className={cn('animated', {
|
|
fadeIn: !data.found,
|
|
hidden: data.found,
|
|
})}
|
|
>
|
|
{q ? (
|
|
<>
|
|
There are no products that match "<strong>{q}</strong>"
|
|
</>
|
|
) : (
|
|
<>
|
|
There are no products that match the selected category &
|
|
designer
|
|
</>
|
|
)}
|
|
</span>
|
|
</>
|
|
) : q ? (
|
|
<>
|
|
Searching for: "<strong>{q}</strong>"
|
|
</>
|
|
) : (
|
|
<>Searching...</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{data ? (
|
|
<Grid layout="normal">
|
|
{data.products.map((product: Product) => (
|
|
<ProductCard
|
|
variant="simple"
|
|
key={product.path}
|
|
className="animated fadeIn"
|
|
product={product}
|
|
imgProps={{
|
|
width: 480,
|
|
height: 480,
|
|
}}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
<Grid layout="normal">
|
|
{rangeMap(12, (i) => (
|
|
<Skeleton
|
|
key={i}
|
|
className="w-full animated fadeIn"
|
|
height={325}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sort */}
|
|
<div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
|
|
<div className="relative inline-block w-full">
|
|
<div className="lg:hidden">
|
|
<span className="rounded-md shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => handleClick(e, 'sort')}
|
|
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
|
id="options-menu"
|
|
aria-haspopup="true"
|
|
aria-expanded="true"
|
|
>
|
|
{sort ? `Sort: ${sort}` : 'Relevance'}
|
|
<svg
|
|
className="-mr-1 ml-2 h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
|
activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
|
|
}`}
|
|
>
|
|
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
|
<div
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="options-menu"
|
|
>
|
|
<ul>
|
|
<li
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
underline: !sort,
|
|
}
|
|
)}
|
|
>
|
|
<Link href={{ pathname, query: filterQuery({ q }) }}>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'sort')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
Relevance
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
{SORT.map(([key, text]) => (
|
|
<li
|
|
key={key}
|
|
className={cn(
|
|
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
|
{
|
|
underline: sort === key,
|
|
}
|
|
)}
|
|
>
|
|
<Link
|
|
href={{
|
|
pathname,
|
|
query: filterQuery({ q, sort: key }),
|
|
}}
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'sort')}
|
|
className={
|
|
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
|
}
|
|
>
|
|
{text}
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
Search.Layout = Layout
|