Skip to content

Commit

Permalink
Layout refinements (#66)
Browse files Browse the repository at this point in the history 
* A more consistent navigation

* Prevent horizontal overflow

* A better code block example

* Updated padding

* Shift the flex layout to be default

* Toggle a navigation

* We don't need to go so high on this z-index

* Super basic hamburger menu

* Formatting

* Remove unused import

* Bigger shadows and wider tracking
  • Loading branch information
@aaronshekey
aaronshekey authored Nov 29, 2023
1 parent b05ffd7 commit 9443087
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 73 deletions.
82 changes: 60 additions & 22 deletions app/components/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Button } from "@/button";
import { cx } from "@/cx";
import { Select, SelectContent, SelectIcon, SelectOption, SelectTrigger } from "@/select";
import { isTheme, theme, useTheme } from "@/theme-provider";
import { WithStyleProps } from "@/types/with-style-props";
import { Link, NavLink } from "@remix-run/react";
import { PropsWithChildren } from "react";
import { PropsWithChildren, useState } from "react";

const MantleLogo = () => (
<svg width="184" height="36">
Expand All @@ -27,10 +26,22 @@ type Props = PropsWithChildren & WithStyleProps;

export function Layout({ children, className, style }: Props) {
const [currentTheme, setTheme] = useTheme();
const [showNavigation, setShowNavigation] = useState(false);

return (
<main className={cx("mx-auto h-full max-w-7xl sm:px-4", className)} style={style}>
<header className="flex h-24 items-center gap-2 px-4 sm:px-0 md:gap-4">
<header className="flex h-24 items-center gap-4 px-4 sm:px-0">
<button
className="md:hidden flex shrink-0 h-10 w-10 items-center justify-center rounded-md border border-gray-300 bg-white focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25"
onClick={() => {
setShowNavigation((s) => !s);
}}
>
{!showNavigation && <HamburgerIcon />}

{showNavigation && <CloseIcon />}
</button>

<Link to="/">
<MantleLogo />
</Link>
Expand Down Expand Up @@ -64,32 +75,31 @@ export function Layout({ children, className, style }: Props) {
<SelectOption value={theme("dark-high-contrast")}>Dark High Contrast</SelectOption>
</SelectContent>
</Select>

<Button className="md:hidden">Search</Button>
{/* <Input placeholder="Search…" state="default" className="hidden md:block md:w-64" /> */}
<Button className="md:hidden" priority="primary">
Menu
</Button>
</header>
{showNavigation && (
<div className="md:hidden absolute bg-card z-50 p-4 bottom-0 top-24 left-0 right-0">
<Navigation className="h-full scrollbar overflow-auto" />
</div>
)}
<div className="flex gap-4 sm:mb-4 lg:mb-9">
<Navigation />
<article className="flex-1 bg-card p-4 shadow-lg sm:rounded-lg md:p-9">{children}</article>
<Navigation className="hidden w-44 pt-9 md:block" />
<article className="flex-1 bg-card p-4 shadow-2xl sm:rounded-lg md:p-9 w-0">{children}</article>
</div>
</main>
);
}

function Navigation({ className, style }: WithStyleProps) {
return (
<nav className={cx("hidden w-44 pt-9 md:block", className)} style={style}>
<nav className={cx("text-sm", className)} style={style}>
<ul role="list" className="flex flex-col">
<li className="mb-2 text-xs font-medium uppercase tracking-widest">Welcome</li>
<li className="mb-2 text-xs font-medium uppercase tracking-wider">Welcome</li>

<li>
<NavLink
className={({ isActive }) =>
cx(
"-ml-2 block rounded-lg px-2 py-1 text-sm text-gray-500 hover:font-medium hover:text-gray-900",
"block py-1 text-gray-500 hover:text-gray-900",
isActive && "font-medium text-blue-600 hover:text-blue-600",
)
}
Expand All @@ -99,14 +109,14 @@ function Navigation({ className, style }: WithStyleProps) {
</NavLink>
</li>

<li className="mt-6 text-xs font-medium uppercase tracking-widest">Base</li>
<li className="mt-6 text-xs font-medium uppercase tracking-wider">Base</li>

<ul role="list" className="mt-2 text-sm">
<ul role="list" className="mt-2">
<li>
<NavLink
className={({ isActive }) =>
cx(
"-ml-2 block rounded-lg px-2 py-1 text-gray-500 hover:font-medium hover:text-gray-900",
"block py-1 text-gray-500 hover:text-gray-900",
isActive && "font-medium text-blue-600 hover:text-blue-600",
)
}
Expand All @@ -119,7 +129,7 @@ function Navigation({ className, style }: WithStyleProps) {
<NavLink
className={({ isActive }) =>
cx(
"-ml-2 block rounded-lg px-2 py-1 text-gray-500 hover:font-medium hover:text-gray-900",
"block py-1 text-gray-500 hover:text-gray-900",
isActive && "font-medium text-blue-600 hover:text-blue-600",
)
}
Expand All @@ -130,13 +140,13 @@ function Navigation({ className, style }: WithStyleProps) {
</li>
</ul>

<li className="mt-6 text-xs font-medium uppercase tracking-widest">Components</li>
<ul role="list" className="mt-2 text-sm">
<li className="mt-6 text-xs font-medium uppercase tracking-wider">Components</li>
<ul role="list" className="mt-2">
<li>
<NavLink
className={({ isActive }) =>
cx(
"-ml-2 block rounded-lg px-2 py-1 text-gray-500 hover:font-medium hover:text-gray-900",
"block py-1 text-gray-500 hover:text-gray-900",
isActive && "font-medium text-blue-600 hover:text-blue-600",
)
}
Expand All @@ -149,7 +159,7 @@ function Navigation({ className, style }: WithStyleProps) {
<NavLink
className={({ isActive }) =>
cx(
"-ml-2 block rounded-lg px-2 py-1 text-gray-500 hover:font-medium hover:text-gray-900",
"block py-1 text-gray-500 hover:text-gray-900",
isActive && "font-medium text-blue-600 hover:text-blue-600",
)
}
Expand All @@ -163,3 +173,31 @@ function Navigation({ className, style }: WithStyleProps) {
</nav>
);
}

const CloseIcon = ({ className, style }: WithStyleProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={cx("h-6 w-6", className)}
style={style}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
);

const HamburgerIcon = ({ className, style }: WithStyleProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={cx("h-6 w-6", className)}
style={style}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
);
76 changes: 30 additions & 46 deletions app/routes/components.code-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton, CodeBlockExpanderButton } from "@/code-block";
import {
CodeBlock,
CodeBlockBody,
CodeBlockCode,
CodeBlockCopyButton,
CodeBlockExpanderButton,
CodeBlockHeader,
CodeBlockTitle,
} from "@/code-block";
import { code } from "@/code-block/code";
import type { MetaFunction } from "@vercel/remix";

Expand All @@ -9,13 +17,27 @@ export const meta: MetaFunction = () => {
];
};

const FileIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
<path
fillRule="evenodd"
d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
clipRule="evenodd"
/>
</svg>
);

export default function Page() {
return (
<div>
<h1 className="text-5xl font-medium">Code Block</h1>
<p className="mt-4 text-xl text-gray-600">Code blocks render and apply syntax highlighting to blocks of code.</p>
<div className="mt-4 flex items-center justify-center rounded-lg rounded-b-none border border-gray-300 bg-background p-9">
<div className="mt-4 flex items-center justify-center rounded-lg rounded-b-none border border-gray-300 bg-background p-4 md:p-9">
<CodeBlock>
<CodeBlockHeader>
<FileIcon />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
<CodeBlockCopyButton />
<CodeBlockCode language="js">
Expand Down Expand Up @@ -75,60 +97,22 @@ export default function Page() {
<CodeBlockCode language="tsx">
{code`
<CodeBlock>
<CodeBlockHeader>
<Icon />
<CodeBlockTitle>…</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
<CodeBlockCopyButton />
<CodeBlockCode language="js">
<CodeBlockCode language="…">
{code\`
const listener = await ngrok.connect({
// session configuration
addr: \`localhost:8080\`, // or \`8080\` or \`unix:$\{UNIX_SOCKET\}\`
authtoken: "<authtoken>",
authtoken_from_env: true,
on_status_change: (addr, error) => {
console.log(\`disconnected, addr $\{addr\} error: $\{error\}\`);
},
session_metadata: "Online in One Line",
// listener configuration
allow_user_agent: "^mozilla.*",
basic_auth: ["ngrok:online1line"],
circuit_breaker: 0.1,
compression: true,
deny_user_agent: "^curl.*",
domain: "<domain>",
ip_restriction_allow_cidrs: ["0.0.0.0/0"],
ip_restriction_deny_cidrs: ["10.1.1.1/32"],
metadata: "example listener metadata from nodejs",
mutual_tls_cas: [fs.readFileSync('ca.crt', 'utf8')],
oauth_provider: "google",
oauth_allow_domains: ["<domain>"],
oauth_allow_emails: ["<email>"],
oauth_scopes: ["<scope>"],
oauth_client_id: "<id>",
oauth_client_secret: "<secret>",
oidc_issuer_url: "<url>",
oidc_client_id: "<id>",
oidc_client_secret: "<secret>",
oidc_allow_domains: ["<domain>"],
oidc_allow_emails: ["<email>"],
oidc_scopes: ["<scope>"],
proxy_proto: "", // One of: "", "1", "2"
request_header_remove: ["X-Req-Nope"],
response_header_remove: ["X-Res-Nope"],
request_header_add: ["X-Req-Yup:true"],
response_header_add: ["X-Res-Yup:true"],
schemes: ["HTTPS"],
verify_webhook_provider: "twilio",
verify_webhook_secret: "asdf",
websocket_tcp_converter: true,
});
…
\`}
</CodeBlockCode>
<CodeBlockExpanderButton />
</CodeBlockBody>
</CodeBlock>
`}
</CodeBlockCode>
<CodeBlockExpanderButton />
</CodeBlockBody>
</CodeBlock>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/routes/components.input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function Page() {
<div>
<h1 className="text-5xl font-medium">Input</h1>
<p className="mt-4 text-xl text-gray-600">Fundamental component for inputs.</p>
<div className="mt-4 flex items-center justify-center rounded-lg rounded-b-none border border-gray-300 bg-background p-9">
<div className="mt-4 flex items-center justify-center rounded-lg rounded-b-none border border-gray-300 bg-background p-4 md:p-9">
<Input placeholder="Enter a username" />
</div>

Expand Down
6 changes: 3 additions & 3 deletions components/code-block/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const CodeBlock = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({
CodeBlock.displayName = "CodeBlock";

const CodeBlockBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div className={cx("relative h-full", className)} ref={ref} {...props} />
<div className={cx("relative", className)} ref={ref} {...props} />
));
CodeBlockBody.displayName = "CodeBlockBody";

Expand Down Expand Up @@ -137,7 +137,7 @@ CodeBlockCode.displayName = "CodeBlockCode";

const CodeBlockHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div
className={cx("flex-shrink-0 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700", className)}
className={cx("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700", className)}
ref={ref}
{...props}
/>
Expand Down Expand Up @@ -179,7 +179,7 @@ const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonPro
<button
type="button"
className={cx(
"absolute right-3.5 top-2 z-50 flex h-[2.125rem] items-center rounded-sm border border-gray-300 bg-gray-50 p-1 shadow-[0.875rem_0_0_0_hsl(var(--gray-050)),_-0.5rem_0_0.35rem_0_hsla(var(--gray-050));] hover:border-gray-400 hover:bg-gray-200 focus:bg-gray-200",
"absolute right-3.5 top-2 z-10 flex h-[2.125rem] items-center rounded-sm border border-gray-300 bg-gray-50 p-1 shadow-[0.875rem_0_0_0_hsl(var(--gray-050)),_-0.5rem_0_0.35rem_0_hsla(var(--gray-050));] hover:border-gray-400 hover:bg-gray-200 focus:bg-gray-200",
copied &&
"gap-1 border-transparent bg-green-500 focus:bg-green-500 px-2 text-button hover:border-transparent hover:bg-green-500",
className,
Expand Down
2 changes: 1 addition & 1 deletion components/select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const SelectTrigger = forwardRef<
<Trigger
ref={ref}
className={cx(
"flex h-10 w-full items-center justify-between rounded-md border border-gray-500 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
Expand Down

1 comment on commit 9443087

@vercel
Copy link

@vercel vercel bot commented on 9443087 Nov 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mantle-storybook – ./

mantle-storybook-git-main-ngrok-dev.vercel.app
mantle-storybook.vercel.app
mantle-storybook-ngrok-dev.vercel.app

Please sign in to comment.