git.iko.soy/urbit.org
on dc9fcd4 help sign in
urbit.org/components/ContentArea.js
61 lines 2.0 kB history raw
1import Section from "./Section";
2import { useState, useEffect } from "react";
3import { TableOfContents } from "./TableOfContents";
5export default function ContentArea(props) {
6 const [shortcut, setShortcut] = useState("");
8 const detectOS = () => {
9 const agent = window.navigator.appVersion;
10 if (agent.includes("Win")) {
11 return "Ctrl+K";
12 } else if (agent.includes("Mac")) {
13 return "⌘K";
14 } else if (agent.includes("Linux")) {
15 return "Ctrl+K";
16 }
17 };
19 useEffect(() => {
20 setShortcut(detectOS());
21 }, []);
23 return (
24 <div className="w-full min-w-0 flex flex-col items-center">
25 <div className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll">
26 <div className="flex justify-between w-full items-center flex-shrink-0">
27 <div className="type-ui text-gray">{props.breadcrumbs}</div>
28 <div className="hidden md:block">
29 <button
30 onClick={(e) => {
31 e.stopPropagation();
32 props.search.toggleSearch();
33 }}
34 className="bg-wall text-gray flex px-4 py-1 rounded-lg type-ui"
35 >
36 Search<div className="ml-4 text-lightGray">{shortcut}</div>
37 </button>
38 </div>
39 </div>
40 <div className="w-full flex justify-center">
41 {props.narrow ? (
42 <Section narrow className={""}>
43 <h2 className="mb-16 mt-24">{props.title}</h2>
44 {props.children}
45 <div className="pb-32" />
46 </Section>
47 ) : (
48 <div className="min-w-0">
49 <h2 className="mb-16 mt-24">{props.title}</h2>
50 {props.children}
51 <div className="pb-32" />
52 </div>
53 )}
54 <TableOfContents
55 key={props.params.slug?.join("/") || Math.random()}
56 />
57 </div>
58 </div>
59 </div>
60 );