leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { useState } from "react";
3//@ts-ignore
4import Terms from "./terms.mdx";
5//@ts-ignore
6import Privacy from "./privacy.mdx";
7import { useSearchParams } from "next/navigation";
8
9export const LegalContent = () => {
10 let searchParams = useSearchParams();
11 let tos = searchParams.get("tos") !== null;
12 let privacy = searchParams.get("privacy") !== null;
13 console.log(searchParams);
14 let [state, setState] = useState<"terms" | "privacy">(
15 privacy ? "privacy" : "terms",
16 );
17 return (
18 <div className="flex flex-col h-full mx-auto sm:px-4 px-3 sm:py-6 py-4 max-w-prose">
19 <h1 className="pb-4 ">The Legal Stuff</h1>
20 <div className="flex flex-row gap-2 z-10">
21 <button
22 onClick={() => {
23 setState("terms");
24 }}
25 className={`rounded-t-md border border-border px-3 py-1 ${state === "terms" ? "border-b-bg-page font-bold bg-bg-page" : "border bg-bg-leaflet text-tertiary"}`}
26 >
27 Terms of Service
28 </button>
29 <button
30 onClick={() => {
31 setState("privacy");
32 }}
33 className={`rounded-t-md border border-border px-3 py-1 ${state === "privacy" ? "border-b-bg-page font-bold bg-bg-page" : "border text-tertiary"}`}
34 >
35 Privacy Policy
36 </button>
37 </div>
38 <div
39 className={`no-scrollbar border border-border rounded-md bg-bg-page sm:px-4 px-3 pt-2 pb-6 -mt-px h-full overflow-y-scroll rounded-tl-none `}
40 >
41 {state === "terms" ? <Terms /> : <Privacy />}
42 </div>
43 </div>
44 );
45};