From 6a50feea35ee7e8d99c6201b5a87030bbe1afb2e Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 21 Mar 2024 15:09:47 -0400 Subject: [PATCH] buttons, and topbar scafoldding --- .gitignore | 2 +- app/components/Button.tsx | 21 ++++++++++++--- app/components/ButtonLink.tsx | 45 +++++++++++++++++++++++++++++++ app/contexts/TopBarInner.tsx | 6 +++++ app/contexts/TopbarMidSection.tsx | 3 --- app/pages/PageCube/PageCube.tsx | 36 ++++++++++++++++++++++--- app/root.tsx | 15 ++++++++--- app/routes/Cube.tsx | 3 ++- app/routes/_index.tsx | 13 ++++++++- app/template/TopBar/TopBar.tsx | 13 ++++++++- 10 files changed, 139 insertions(+), 18 deletions(-) create mode 100644 app/components/ButtonLink.tsx create mode 100644 app/contexts/TopBarInner.tsx delete mode 100644 app/contexts/TopbarMidSection.tsx diff --git a/.gitignore b/.gitignore index aa5a7831fa..5f99d7ed8b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules - +/~/ /.cache /public/build /build diff --git a/app/components/Button.tsx b/app/components/Button.tsx index ce52235d12..206f0ee6c2 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -3,20 +3,33 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface ButtonProps extends React.ButtonHTMLAttributes { icon?: IconDefinition; + variant?: "primary"|"secondary"; } export const Button = ({ icon, children, className : propsClassName, + variant = 'primary', ...rest }:ButtonProps)=>{ + function getVariantClassNames(variant: string){ + switch(variant){ + case "secondary":{ + return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; + } + case "primary": + default:{ + return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600"; + } + } + }; const className = ` - bg-brand-primary hover:bg-brand-primary-400 - text-white text-sm font-semibold + text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm - focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-600 - ` + (propsClassName ? ` ${propsClassName}` : null); + focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 + ` + getVariantClassNames(variant) + + (propsClassName ? ` ${propsClassName}` : null); return( + + ); + } \ No newline at end of file diff --git a/app/contexts/TopBarInner.tsx b/app/contexts/TopBarInner.tsx new file mode 100644 index 0000000000..5bc2a3a9ac --- /dev/null +++ b/app/contexts/TopBarInner.tsx @@ -0,0 +1,6 @@ +import { ReactNode, createContext } from "react"; + +export const TopBarInnerContext = createContext<{ + TopBarInner: JSX.Element | null; + setTopBarInner: (el: JSX.Element | null)=>void; +} | null>(null); \ No newline at end of file diff --git a/app/contexts/TopbarMidSection.tsx b/app/contexts/TopbarMidSection.tsx deleted file mode 100644 index 092e27c488..0000000000 --- a/app/contexts/TopbarMidSection.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ReactNode, createContext } from "react"; - -export const TopBarMidSection = createContext(null); \ No newline at end of file diff --git a/app/pages/PageCube/PageCube.tsx b/app/pages/PageCube/PageCube.tsx index 4105732d29..12c5938ef5 100644 --- a/app/pages/PageCube/PageCube.tsx +++ b/app/pages/PageCube/PageCube.tsx @@ -1,13 +1,26 @@ import { - useRef, - useEffect, - useState, useCallback, + useContext, + useEffect, + useLayoutEffect, + useRef, + useState, } from 'react'; +import { + faChevronLeft +} from "@fortawesome/free-solid-svg-icons"; + +import { Button } from '~/components/Button'; +import { ButtonLink } from '~/components/ButtonLink'; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; + import { SceneWithCube } from './SceneWithCube'; export const PageCube = () => { + + const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + const mountRef = useRef(null); const sceneRef = useRef(null); const [{ @@ -45,10 +58,25 @@ export const PageCube = () => { }; }, []); + useLayoutEffect(()=>{ + if(setTopBarInner){ + const BackButton = ( + + Back to Dashboard + + ); + setTopBarInner(BackButton); + } + },[setTopBarInner]); + return ( <>
- +

{rotationX ? rotationX : ""}

{rotationY ? rotationY : ""}

diff --git a/app/root.tsx b/app/root.tsx index 3feb117533..01b934e202 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { LinksFunction } from "@remix-run/deno"; import { Links, @@ -11,7 +12,8 @@ import tailwindCss from "./styles/tailwind.css?url"; import normalizeCss from "./styles/normalize.css?url"; import { TopBar } from "./template/TopBar"; -import { TopBarMidSection } from "./contexts/TopbarMidSection"; +import { TopBarInnerContext } from '~/contexts/TopBarInner'; + export const links : LinksFunction = () => [{ rel: "stylesheet", @@ -22,6 +24,8 @@ export const links : LinksFunction = () => [{ }]; export default function App() { + const [topBarInnerComponent, setTopBarInnerComponent] = useState(null); + return ( @@ -31,8 +35,13 @@ export default function App() { - - + + + + diff --git a/app/routes/Cube.tsx b/app/routes/Cube.tsx index 4fa19f67b5..909c2f0521 100644 --- a/app/routes/Cube.tsx +++ b/app/routes/Cube.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { PageCube } from "../pages/PageCube"; import { Button } from '~/components/Button'; export default function Cube(){ + const pausedRiddle = true; const [riddle, setRiddle] = useState(""); const [submitted, setSubmitted] = useState(false); @@ -17,7 +18,7 @@ export default function Cube(){ alert("What is the price for your blind eye?") } - if(submitted){ + if(submitted || pausedRiddle){ return }else{ return( diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 7c9037bbfd..4676568346 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,4 +1,10 @@ +import { + useContext, + useLayoutEffect, +} from "react"; import type { MetaFunction } from "@remix-run/deno"; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; + import sonic from "./_assets/sonic-the-hedgehog-classic-sonic.gif"; export const meta: MetaFunction = () => { @@ -8,8 +14,13 @@ export const meta: MetaFunction = () => { ]; }; - export default function Index() { + const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + useLayoutEffect(()=>{ + if(setTopBarInner){ + setTopBarInner(null); + } + },[setTopBarInner]); return (
{ +import { TopBarInnerContext } from '~/contexts/TopBarInner'; +export const TopBar = () => { return (
+ ) } + +const TopBarInner = ()=>{ + const { TopBarInner } = useContext(TopBarInnerContext) || {} + return(TopBarInner); +} \ No newline at end of file