mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-09 21:07:46 +00:00
97659c687b
Adds a Hydrogen v2 template which is the output of the `npm create @shopify/hydrogen@latest` command. Note that a `vercel.json` file is being used to define the environment variables that are required at runtime. This is required for the template to deploy with zero configuration, however the user should update these values (including replacing the session secret) and migrate them to the Project settings in the Vercel dashboard. [Live example](https://hydrogen-v2-template.vercel.app)
48 lines
936 B
TypeScript
48 lines
936 B
TypeScript
/**
|
|
* A side bar component with Overlay that works without JavaScript.
|
|
* @example
|
|
* ```ts
|
|
* <Aside id="search-aside" heading="SEARCH">`
|
|
* <input type="search" />
|
|
* ...
|
|
* </Aside>
|
|
* ```
|
|
*/
|
|
export function Aside({
|
|
children,
|
|
heading,
|
|
id = 'aside',
|
|
}: {
|
|
children?: React.ReactNode;
|
|
heading: React.ReactNode;
|
|
id?: string;
|
|
}) {
|
|
return (
|
|
<div aria-modal className="overlay" id={id} role="dialog">
|
|
<button
|
|
className="close-outside"
|
|
onClick={() => {
|
|
history.go(-1);
|
|
window.location.hash = '';
|
|
}}
|
|
/>
|
|
<aside>
|
|
<header>
|
|
<h3>{heading}</h3>
|
|
<CloseAside />
|
|
</header>
|
|
<main>{children}</main>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CloseAside() {
|
|
return (
|
|
/* eslint-disable-next-line jsx-a11y/anchor-is-valid */
|
|
<a className="close" href="#" onChange={() => history.go(-1)}>
|
|
×
|
|
</a>
|
|
);
|
|
}
|