From 001615f5eb9e166270a65995ce13b61ddbe82264 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 21:13:30 +0530 Subject: [PATCH 01/10] fix publish workflow --- .github/workflows/publish.yml | 32 ++++---------------------------- packages/nextjs-themes/scope.js | 12 +++++------- 2 files changed, 9 insertions(+), 35 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index c7bf1481..e92f3185 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,4 +1,4 @@ -name: Publish (NPM & GPR) +name: Publish to NPM # publish only when package json has changed - assuming version upgrade on: @@ -8,8 +8,6 @@ on: jobs: publish: - # Don't run just after creating repo from template - # Also avoid running after merging set-up PR runs-on: ubuntu-latest permissions: packages: write @@ -33,37 +31,15 @@ jobs: # fail and not publish if any of the unit tests are failing - name: Test run: pnpm test - - name: Update topics and Publish to NPM - run: pnpm build && pnpm publish-package && cd dist && node ../scope.js && npm publish --access public + - name: Create release and Publish to NPM + run: pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} TOKEN: ${{ secrets.GITHUB_TOKEN }} OWNER: ${{ github.event.repository.owner.login }} REPO: ${{ github.event.repository.name }} - - uses: actions/setup-node@v3 - with: - registry-url: https://npm.pkg.github.com/ - - name: Publish to GitHub Public Repository - run: pnpm publish-package - continue-on-error: true - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Publish lite version - - uses: actions/setup-node@v3 - with: - node-version: 18 - registry-url: https://registry.npmjs.org - - run: node lite.js && pnpm build && pnpm publish-package && cd dist && node ../scope.js && sleep 2s && npm publish --access public + - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} - TOKEN: ${{ secrets.GITHUB_TOKEN }} - OWNER: ${{ github.event.repository.owner.login }} - REPO: ${{ github.event.repository.name }} - - uses: actions/setup-node@v3 - with: - registry-url: https://npm.pkg.github.com/ - - name: Publish to GitHub Public Repository - run: pnpm publish-package - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/packages/nextjs-themes/scope.js b/packages/nextjs-themes/scope.js index ae8e044b..07f136e6 100644 --- a/packages/nextjs-themes/scope.js +++ b/packages/nextjs-themes/scope.js @@ -3,16 +3,14 @@ const fs = require("node:fs"); const path = require("node:path"); -const owner = process.env.OWNER; -const packageJson = require(path.resolve(process.cwd(), "package.json")); +const owner = "mayank1513"; +const wd = path.resolve(process.cwd(), "dist"); +const packageJson = require(path.resolve(wd, "package.json")); const ref = packageJson.name; if (!ref.startsWith(`@${owner}`)) { packageJson.name = `@${owner}/${packageJson.name}`; - fs.writeFileSync( - path.resolve(process.cwd(), "package.json"), - JSON.stringify(packageJson, null, 2), - ); - const readMePath = path.resolve(process.cwd(), "README.md"); + fs.writeFileSync(path.resolve(wd, "package.json"), JSON.stringify(packageJson, null, 2)); + const readMePath = path.resolve(wd, "README.md"); let readMe = fs.readFileSync(readMePath, { encoding: "utf8" }); const tmp = "!--|--!"; readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp); From 5bc6964a2e739c6ebb4e472e5efb0acb68e963e6 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 22:11:42 +0530 Subject: [PATCH 02/10] add shared ui --- packages/shared-ui/.eslintrc.js | 3 + packages/shared-ui/index.ts | 1 + packages/shared-ui/package.json | 27 +++ packages/shared-ui/src/cards/cards.module.css | 75 ++++++++ packages/shared-ui/src/cards/docs-card.tsx | 16 ++ .../shared-ui/src/cards/examples-card.tsx | 16 ++ packages/shared-ui/src/cards/index.tsx | 17 ++ .../src/cards/page-navigator-card.tsx | 47 +++++ packages/shared-ui/src/cards/star-me-card.tsx | 13 ++ packages/shared-ui/src/common/logo.tsx | 11 ++ packages/shared-ui/src/common/select.tsx | 25 +++ packages/shared-ui/src/declaration.d.ts | 4 + packages/shared-ui/src/forced-page-layout.tsx | 21 +++ packages/shared-ui/src/globals.css | 121 +++++++++++++ packages/shared-ui/src/index.ts | 3 + packages/shared-ui/src/root-layout.module.css | 169 ++++++++++++++++++ packages/shared-ui/src/root-layout.tsx | 36 ++++ packages/shared-ui/src/root/description.tsx | 24 +++ packages/shared-ui/src/root/footer.tsx | 10 ++ packages/shared-ui/src/root/hero.tsx | 15 ++ .../color-scheme-preference.tsx | 21 +++ .../src/theme-controller/theme-controller.tsx | 18 ++ .../src/theme-controller/theme-selector.tsx | 59 ++++++ .../shared-ui/src/theme-controller/themes.ts | 2 + packages/shared-ui/tsconfig.json | 5 + 25 files changed, 759 insertions(+) create mode 100644 packages/shared-ui/.eslintrc.js create mode 100644 packages/shared-ui/index.ts create mode 100644 packages/shared-ui/package.json create mode 100644 packages/shared-ui/src/cards/cards.module.css create mode 100644 packages/shared-ui/src/cards/docs-card.tsx create mode 100644 packages/shared-ui/src/cards/examples-card.tsx create mode 100644 packages/shared-ui/src/cards/index.tsx create mode 100644 packages/shared-ui/src/cards/page-navigator-card.tsx create mode 100644 packages/shared-ui/src/cards/star-me-card.tsx create mode 100644 packages/shared-ui/src/common/logo.tsx create mode 100644 packages/shared-ui/src/common/select.tsx create mode 100644 packages/shared-ui/src/declaration.d.ts create mode 100644 packages/shared-ui/src/forced-page-layout.tsx create mode 100644 packages/shared-ui/src/globals.css create mode 100644 packages/shared-ui/src/index.ts create mode 100644 packages/shared-ui/src/root-layout.module.css create mode 100644 packages/shared-ui/src/root-layout.tsx create mode 100644 packages/shared-ui/src/root/description.tsx create mode 100644 packages/shared-ui/src/root/footer.tsx create mode 100644 packages/shared-ui/src/root/hero.tsx create mode 100644 packages/shared-ui/src/theme-controller/color-scheme-preference.tsx create mode 100644 packages/shared-ui/src/theme-controller/theme-controller.tsx create mode 100644 packages/shared-ui/src/theme-controller/theme-selector.tsx create mode 100644 packages/shared-ui/src/theme-controller/themes.ts create mode 100644 packages/shared-ui/tsconfig.json diff --git a/packages/shared-ui/.eslintrc.js b/packages/shared-ui/.eslintrc.js new file mode 100644 index 00000000..05ac2b2b --- /dev/null +++ b/packages/shared-ui/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ["custom/react-internal"], +}; diff --git a/packages/shared-ui/index.ts b/packages/shared-ui/index.ts new file mode 100644 index 00000000..3bd16e17 --- /dev/null +++ b/packages/shared-ui/index.ts @@ -0,0 +1 @@ +export * from "./src"; diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json new file mode 100644 index 00000000..88129d01 --- /dev/null +++ b/packages/shared-ui/package.json @@ -0,0 +1,27 @@ +{ + "name": "shared-ui", + "author": "Mayank Kumar Chaudhari ", + "private": true, + "version": "1.0.1", + "description": "Shared UI Package", + "main": "./index.ts", + "types": "./index.ts", + "scripts": { + "lint": "eslint ." + }, + "devDependencies": { + "@mayank1513/fork-me": "^2.0.0", + "@types/node": "^20.10.1", + "@types/react": "^18.2.39", + "@types/react-dom": "^18.2.17", + "eslint-config-custom": "workspace:*", + "next": "^14.0.3", + "react": "^18.2.0", + "react18-themes": "workspace:*", + "tsconfig": "workspace:*", + "typescript": "5.3.2" + }, + "dependencies": { + "eslint": "^8.54.0" + } +} diff --git a/packages/shared-ui/src/cards/cards.module.css b/packages/shared-ui/src/cards/cards.module.css new file mode 100644 index 00000000..050430d1 --- /dev/null +++ b/packages/shared-ui/src/cards/cards.module.css @@ -0,0 +1,75 @@ +.cards { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 25px; + width: var(--max-width); + max-width: 95vw; +} + +.card { + all: unset; + display: flex; + flex-direction: column; + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0.1); + cursor: pointer; + transition: + background 200ms, + border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-top: 0; + text-align: start; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + width: 34ch; + text-align: start; +} + +.card nav { + display: flex; + gap: 15px; + padding-top: 10px; +} + +.card nav select { + flex-grow: 1; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +/* Mobile and Tablet */ +@media (max-width: 1023px) { + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } +} diff --git a/packages/shared-ui/src/cards/docs-card.tsx b/packages/shared-ui/src/cards/docs-card.tsx new file mode 100644 index 00000000..c2ef0baf --- /dev/null +++ b/packages/shared-ui/src/cards/docs-card.tsx @@ -0,0 +1,16 @@ +import styles from "./cards.module.css"; + +export function DocsCard() { + return ( + +

+ Docs -> +

+

Explore the official docs.

+ + ); +} diff --git a/packages/shared-ui/src/cards/examples-card.tsx b/packages/shared-ui/src/cards/examples-card.tsx new file mode 100644 index 00000000..d5b8ccb1 --- /dev/null +++ b/packages/shared-ui/src/cards/examples-card.tsx @@ -0,0 +1,16 @@ +import styles from "./cards.module.css"; + +export function ExamplesCard() { + return ( + +

+ More Examples -> +

+

Explore more examples on official GitHub Repo.

+ + ); +} diff --git a/packages/shared-ui/src/cards/index.tsx b/packages/shared-ui/src/cards/index.tsx new file mode 100644 index 00000000..2420d279 --- /dev/null +++ b/packages/shared-ui/src/cards/index.tsx @@ -0,0 +1,17 @@ +import { ExamplesCard } from "./examples-card"; +import type { PageNavigatorCardProps } from "./page-navigator-card"; +import { PageNavigatorCard } from "./page-navigator-card"; +import styles from "./cards.module.css"; +import { StarMeCard } from "./star-me-card"; +import { DocsCard } from "./docs-card"; + +export function Cards({ LinkElement }: PageNavigatorCardProps) { + return ( +
+ + + + +
+ ); +} diff --git a/packages/shared-ui/src/cards/page-navigator-card.tsx b/packages/shared-ui/src/cards/page-navigator-card.tsx new file mode 100644 index 00000000..ce5b3d43 --- /dev/null +++ b/packages/shared-ui/src/cards/page-navigator-card.tsx @@ -0,0 +1,47 @@ +"use client"; +import type { ChangeEvent, FC, HTMLProps } from "react"; +import { useState } from "react"; +import { darkThemes, lightThemes } from "../theme-controller/themes"; +import { Select } from "../common/select"; +import styles from "./cards.module.css"; + +const exampleTypes: string[] = ["Themed Page", "Forced Color Scheme"]; + +export interface PageNavigatorCardProps { + LinkElement: unknown; +} + +export function PageNavigatorCard({ LinkElement }: PageNavigatorCardProps): JSX.Element { + const [exampleType, setExampleType] = useState("Themed Page"); + const [example, setExample] = useState(darkThemes[0]); + const [exampleOptions, setExampleOptions] = useState([...darkThemes, ...lightThemes]); + const handleChangeExampleType: (e: ChangeEvent) => void = e => { + const expType = e.target.value; + const expOptions = expType === "themed-page" ? [...darkThemes, ...lightThemes] : ["system", "dark", "light"]; + setExampleOptions(expOptions); + setExample(expOptions[0]); + setExampleType(expType); + }; + + const handleChangeExample: (e: ChangeEvent) => void = e => setExample(e.target.value); + const href = `/${exampleType.replace(/ +/g, "-").toLowerCase()}/${example}`; + const Link = LinkElement as FC<{ to?: string } & HTMLProps>; + return ( +
+

+ Pages Navigator + +  -> + +

+

+ Pages with forced theme/colorScheme +

+
+ +
+ ); +} diff --git a/packages/shared-ui/src/cards/star-me-card.tsx b/packages/shared-ui/src/cards/star-me-card.tsx new file mode 100644 index 00000000..f7188997 --- /dev/null +++ b/packages/shared-ui/src/cards/star-me-card.tsx @@ -0,0 +1,13 @@ +import { StarMe } from "@mayank1513/fork-me"; +import styles from "./cards.module.css"; + +export function StarMeCard() { + return ( + +

+ Star this repo -> +

+

Star this repo for your new library!

+ + ); +} diff --git a/packages/shared-ui/src/common/logo.tsx b/packages/shared-ui/src/common/logo.tsx new file mode 100644 index 00000000..deb453ff --- /dev/null +++ b/packages/shared-ui/src/common/logo.tsx @@ -0,0 +1,11 @@ +"use client"; +import { useState, type HTMLProps, useEffect } from "react"; + +export function Logo(props: HTMLProps) { + /** Default to react18-themes variant for local server - assuming http:// schema for local and https:// for production */ + const [variant, setVariant] = useState("react18-themes"); + useEffect(() => { + if (window.location.origin.startsWith("https")) setVariant(window.location.origin.split("://")[1].split(".")[0]); + }, []); + return {variant}; +} diff --git a/packages/shared-ui/src/common/select.tsx b/packages/shared-ui/src/common/select.tsx new file mode 100644 index 00000000..bbacd8fb --- /dev/null +++ b/packages/shared-ui/src/common/select.tsx @@ -0,0 +1,25 @@ +import type { HTMLProps, ReactNode } from "react"; + +export interface SelectOptionsProps { + value: string; + children: ReactNode; +} + +interface SelectProps extends HTMLProps { + options: string[] | SelectOptionsProps[]; +} + +export function Select({ options, ...props }: SelectProps) { + const renderOptions = options.map(option => + typeof option === "string" ? { value: option, children: option } : option, + ); + return ( + + ); +} diff --git a/packages/shared-ui/src/declaration.d.ts b/packages/shared-ui/src/declaration.d.ts new file mode 100644 index 00000000..a1421d73 --- /dev/null +++ b/packages/shared-ui/src/declaration.d.ts @@ -0,0 +1,4 @@ +declare module "*.module.css" { + const classNames: Record; + export = classNames; +} diff --git a/packages/shared-ui/src/forced-page-layout.tsx b/packages/shared-ui/src/forced-page-layout.tsx new file mode 100644 index 00000000..1ded5d4b --- /dev/null +++ b/packages/shared-ui/src/forced-page-layout.tsx @@ -0,0 +1,21 @@ +import type { FC, HTMLProps } from "react"; +import type { SharedRootLayoutProps } from "./root-layout"; + +interface ForcedPageLayoutProps extends SharedRootLayoutProps { + scope: "forcedColorScheme" | "forcedTheme"; +} + +export function ForcedPageLayout({ LinkElement, scope, children }: ForcedPageLayoutProps) { + const Link = LinkElement as FC<{ to?: string } & HTMLProps>; + return ( +
+

+ + 🔙🏡 + {" "} + Example page showing {scope} +

+ {children} +
+ ); +} diff --git a/packages/shared-ui/src/globals.css b/packages/shared-ui/src/globals.css new file mode 100644 index 00000000..b9363ca6 --- /dev/null +++ b/packages/shared-ui/src/globals.css @@ -0,0 +1,121 @@ +* { + box-sizing: border-box; +} + +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", + "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace; + --bg-color: #fff; + --text-color: #000; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; + --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080); +} + +/* dark themes */ +[data-theme="dark"], +[data-theme="dark"] ~ *, +[data-theme="black"], +[data-theme="black"] ~ * { + --bg-color: #000; + --text-color: #fff; +} + +[data-theme="gray"], +[data-theme="gray"] ~ * { + --bg-color: gray; + --text-color: #fff; +} + +[data-theme="dark-blue"], +[data-theme="dark-blue"] ~ * { + --bg-color: #006; + --text-color: #ff0; +} + +[data-theme="dark"], +[data-theme="dark"] ~ *, +[data-theme="black"], +[data-theme="black"] ~ *, +[data-theme="gray"], +[data-theme="gray"] ~ *, +[data-theme="dark-blue"], +[data-theme="dark-blue"] ~ * { + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3)); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80); +} + +/* light themes */ + +[data-theme="white"], +[data-theme="white"] ~ * { + --bg-color: #fff; + --text-color: #000; +} + +[data-theme="yellow"], +[data-theme="yellow"] ~ * { + --bg-color: #ff0; + --text-color: #00f; +} + +[data-theme="orange"], +[data-theme="orange"] ~ * { + --bg-color: #ffa500; + --text-color: #05f; +} + +html { + padding: 0; + margin: 0; +} + +body, +#root { + padding: 0; + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +main, +footer { + background: var(--bg-color); + color: var(--text-color); +} + +main { + flex-grow: 1; +} + +footer { + text-align: center; + padding: 10px; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts new file mode 100644 index 00000000..db460237 --- /dev/null +++ b/packages/shared-ui/src/index.ts @@ -0,0 +1,3 @@ +export * from "./theme-controller/themes"; +export * from "./root-layout"; +export * from "./forced-page-layout"; diff --git a/packages/shared-ui/src/root-layout.module.css b/packages/shared-ui/src/root-layout.module.css new file mode 100644 index 00000000..4c163ca6 --- /dev/null +++ b/packages/shared-ui/src/root-layout.module.css @@ -0,0 +1,169 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 3rem 0; + min-height: calc(100vh - 55px); +} + +.description { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap !important; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); + padding: 10px; + padding-right: 100px; + position: sticky; + top: 0; + backdrop-filter: blur(3px); +} + +.description a { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + flex-wrap: wrap; + padding: 3rem; + gap: 20px 50px; +} + +.center > div { + position: relative; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; + pointer-events: none; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ""; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.prefs { + padding-bottom: 4rem; +} + +.prefs select { + width: 85px; + float: right; + margin-left: 20px; + opacity: 0.3; +} + +select.active, +select.light { + opacity: 1; +} + +.logo { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; + padding: 2px; +} +.logo p { + background: var(--bg-color); +} +.logo::before, +.logo::after { + content: " "; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.logo::before { + animation: 3s rotate infinite linear; + width: 800%; + height: 800%; + background: var(--tile-border); +} + +/* Inner Square */ +.logo::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient(to bottom right, rgba(var(--tile-start-rgb), 1), rgba(var(--tile-end-rgb), 1)); + background-clip: content-box; +} + +/* Mobile and Tablet */ +@media (max-width: 800px) { + .center { + padding: 4rem; + } + .description { + padding: 30px; + padding-right: 100px; + } +} + +@media (prefers-color-scheme: dark) { + select.dark { + opacity: 1; + } + select.light { + opacity: 0.3; + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/packages/shared-ui/src/root-layout.tsx b/packages/shared-ui/src/root-layout.tsx new file mode 100644 index 00000000..2294b9f3 --- /dev/null +++ b/packages/shared-ui/src/root-layout.tsx @@ -0,0 +1,36 @@ +import "./globals.css"; +import "react18-themes/src/styles.css"; +import { ColorSwitch, ThemeSwitcher } from "react18-themes"; +import { ForkMe } from "@mayank1513/fork-me/server/index.js"; // import directory not supported in remix +import type { HTMLProps } from "react"; +import type { PageNavigatorCardProps } from "./cards/page-navigator-card"; +import styles from "./root-layout.module.css"; +import { ThemeController } from "./theme-controller/theme-controller"; +import { Cards } from "./cards"; +import { Description } from "./root/description"; +import { Hero } from "./root/hero"; +import { Footer } from "./root/footer"; + +export type SharedRootLayoutProps = HTMLProps & PageNavigatorCardProps; + +export function SharedRootLayout({ children, className = "", LinkElement, ...props }: SharedRootLayoutProps) { + return ( + <> + +
+ + {children} + + + + +
+