mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
06db6ca62d
### What? Updated the example `with-storybook`, by upgrading storybook to version 8.0.9 (the latest) which required bumping the version of next.js to 14 from 13 in order to make them work together. ### Why? The motivation for this change is that we now have better the lastest features of storybook such as chromatic and visual testing. As of previous updates, it is still treated as its own framework and so users can specify the `storybook` framework as well as custom build command `build-storybook` in order to get near zero-config support. --------- Co-authored-by: Sam Ko <[email protected]>
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React from "react";
|
|
|
|
import { Button } from "./Button";
|
|
import "./header.css";
|
|
|
|
type User = {
|
|
name: string;
|
|
};
|
|
|
|
interface HeaderProps {
|
|
user?: User;
|
|
onLogin?: () => void;
|
|
onLogout?: () => void;
|
|
onCreateAccount?: () => void;
|
|
}
|
|
|
|
export const Header = ({
|
|
user,
|
|
onLogin,
|
|
onLogout,
|
|
onCreateAccount,
|
|
}: HeaderProps) => (
|
|
<header>
|
|
<div className="storybook-header">
|
|
<div>
|
|
<svg
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 32 32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g fill="none" fillRule="evenodd">
|
|
<path
|
|
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
|
fill="#FFF"
|
|
/>
|
|
<path
|
|
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
|
fill="#555AB9"
|
|
/>
|
|
<path
|
|
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
|
fill="#91BAF8"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<h1>Acme</h1>
|
|
</div>
|
|
<div>
|
|
{user ? (
|
|
<>
|
|
<span className="welcome">
|
|
Welcome, <b>{user.name}</b>!
|
|
</span>
|
|
<Button size="small" onClick={onLogout} label="Log out" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Button size="small" onClick={onLogin} label="Log in" />
|
|
<Button
|
|
primary
|
|
size="small"
|
|
onClick={onCreateAccount}
|
|
label="Sign up"
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|