git.iko.soy/urbit.org
on master help sign in
urbit.org/components/ContentArea.js
86 lines 2.6 kB history raw
1import { useState, useEffect, useRef } from "react";
2import { useRouter } from "next/router";
3import { TableOfContents } from "@urbit/foundation-design-system";
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 const scrollBox = useRef();
25 const router = useRouter();
27 useEffect(() => {
28 const handleRouteChange = () => {
29 if (scrollBox.current === null) return;
30 scrollBox.current.scrollTop = 0;
31 };
33 router.events.on("routeChangeComplete", handleRouteChange);
35 // If the component is unmounted, unsubscribe
36 // from the event with the `off` method:
37 return () => {
38 router.events.off("routeChangeStart", handleRouteChange);
39 };
40 }, []);
42 return (
43 <div className="w-full min-w-0 flex flex-col items-center bg-white">
44 <div
45 ref={scrollBox}
46 className="px-4 md:px-12 lg:px-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"
47 >
48 <div className="flex justify-between w-full items-center shrink-0">
49 <div className="font-semibold antialiased text-lg text-black">
50 {props.breadcrumbs}
51 </div>
52 <div className="hidden md:block">
53 <button
54 onClick={(e) => {
55 e.stopPropagation();
56 props.search.toggleSearch();
57 }}
58 className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
59 >
60 Search<div className="ml-4 text-wall-400">{shortcut}</div>
61 </button>
62 </div>
63 </div>
64 <div className="flex justify-between">
65 <div className="min-w-0 max-w-screen-md">
66 <div className="mb-16">
67 <h2 className="mt-24">{props.title}</h2>
68 {props?.description && (
69 <p className="text-wall-400 font-regular mt-2 text-xl">
70 {props.description}
71 </p>
72 )}
73 </div>
74 {props.children}
75 <div className="pb-24" />
76 </div>
77 {!props?.disableToC && (
78 <TableOfContents
79 key={props.params.slug?.join("/") || Math.random()}
80 />
81 )}
82 </div>
83 </div>
84 </div>
85 );