chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -0,0 +1,109 @@
+import { forwardRef } from "react";
+import { cn } from "~/utils/cn";
+
+/** This container is used to surround the entire app, it correctly places the nav bar */
+export function AppContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function MainBody({ children }: { children: React.ReactNode }) {
+  return <div className={cn("grid grid-rows-1 overflow-hidden")}>{children}</div>;
+}
+
+/** This container should be placed around the content on a page */
+export function PageContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid h-full grid-rows-[auto_1fr] overflow-hidden", className)}>
+      {children}
+    </div>
+  );
+}
+
+export const PageBody = forwardRef<
+  HTMLDivElement,
+  {
+    children: React.ReactNode;
+    scrollable?: boolean;
+    className?: string;
+  }
+>(function PageBody({ children, scrollable = true, className }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        scrollable
+          ? "overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+          : "overflow-hidden",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+export function MainCenteredContainer({
+  children,
+  className,
+  variant = "default",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "default" | "onboarding";
+}) {
+  return (
+    <div
+      className={cn(
+        "h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",
+        variant === "onboarding" && "flex flex-col p-4 lg:p-0"
+      )}
+    >
+      <div
+        className={cn(
+          "mx-auto max-w-xs p-1",
+          variant === "onboarding" ? "m-auto lg:mx-auto lg:mb-0 lg:mt-[22vh]" : "mt-6 md:mt-[22vh]",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function MainHorizontallyCenteredContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className="w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+      <div
+        className={cn(
+          "mx-auto mt-6 max-w-lg overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control md:mt-14",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}