git.iko.soy/urbit.org
on 883cb21 help sign in
urbit.org/components/ContentArea.js
84 lines 2.6 kB history raw
1import Section from "./Section";
2import { useState, useEffect, useRef } from "react";
3import { useRouter } from "next/router";
4import { TableOfContents } from "./TableOfContents";
6export default function ContentArea(props) {
7 const [shortcut, setShortcut] = useState("");
9 const detectOS = () => {
10 const agent = window.navigator.appVersion;
11 if (agent.includes("Win")) {
12 return "Ctrl+K";
13 } else if (agent.includes("Mac")) {
14 return "⌘K";
15 } else if (agent.includes("Linux")) {
16 return "Ctrl+K";
17 }
18 };
20 useEffect(() => {
21 setShortcut(detectOS());
22 }, []);
24 const scrollBox = useRef();
26 const router = useRouter();
28 useEffect(() => {
29 const handleRouteChange = () => {
30 if (scrollBox.current === null) return;
31 scrollBox.current.scrollTop = 0;
32 };
34 router.events.on("routeChangeComplete", handleRouteChange);
36 // If the component is unmounted, unsubscribe
37 // from the event with the `off` method:
38 return () => {
39 router.events.off("routeChangeStart", handleRouteChange);
40 };
41 }, []);
43 return (
44 <div className="w-full min-w-0 flex flex-col items-center">
45 <div
46 ref={scrollBox}
47 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"
48 >
49 <div className="flex justify-between w-full items-center flex-shrink-0">
50 <div className="type-ui text-wall-500">{props.breadcrumbs}</div>
51 <div className="hidden md:block">
52 <button
53 onClick={(e) => {
54 e.stopPropagation();
55 props.search.toggleSearch();
56 }}
57 className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
58 >
59 Search<div className="ml-4 text-wall-400">{shortcut}</div>
60 </button>
61 </div>
62 </div>
63 <div className="w-full flex justify-center">
64 {props.narrow ? (
65 <Section narrow className={""}>
66 <h2 className="mb-16 mt-24">{props.title}</h2>
67 {props.children}
68 <div className="pb-32" />
69 </Section>
70 ) : (
71 <div className="min-w-0">
72 <h2 className="mb-16 mt-24">{props.title}</h2>
73 {props.children}
74 <div className="pb-32" />
75 </div>
76 )}
77 <TableOfContents
78 key={props.params.slug?.join("/") || Math.random()}
79 />
80 </div>
81 </div>
82 </div>
83 );