DrewHack Posts - Answer Overflow

DrewHack

•Created by DrewHack on 8/22/2023 in #questions

Pretty Basic (I think) React / Tailwind / Next question

Hi everyone, I have tailwind UI and I'm trying to implement a theming system similar to : https://www.skies.dev/tailwind-themes - I'm sure something I'm missing is basic react functionality but I've not been able to find the right answer and I'm sorry to just brain dump here but I've kind of reached an impasse (and don't have a lot of friends familiar enough with React to help...) - His basic tutorial works great, however I'm trying to expand on that. - The Basics, I'm using React, Next.JS (App Directory), Tailwind UI - - I've defined my theme colors in global.css and their associated variables - - In layout.tsx I declare the themes (as colors) and define color as setColor

export default function RootLayout({
  
  children,
}: {
  children: React.ReactNode
}) {
  const colors = ['light', 'dark', 'blue', 'highcontrast'];
  const [color, setColor] = useState<string>(colors[1])
  return (

        <html className="h-full bg-white">
          <body className="h-full">
          <div className={[
            
            color && `theme-${color}`,
            ]
            .filter(Boolean)
            .join(' ')}>
              {children}
          </div> 
          </body>
       </html>
  )
}

export default function RootLayout({
  
  children,
}: {
  children: React.ReactNode
}) {
  const colors = ['light', 'dark', 'blue', 'highcontrast'];
  const [color, setColor] = useState<string>(colors[1])
  return (

        <html className="h-full bg-white">
          <body className="h-full">
          <div className={[
            
            color && `theme-${color}`,
            ]
            .filter(Boolean)
            .join(' ')}>
              {children}
          </div> 
          </body>
       </html>
  )
}

- - page.tsx calls the component <Sidebar /> which is not really just a sidebar but also a navbar (from TailwindUI) - - Inside Sidebar I have the following menu drop down to select the themes

<RadioGroup value={color} onChange={setColor}>
                        <RadioGroup.Label className="mt-5 block">
                          Select a color:
                        </RadioGroup.Label>
                        <div className="">
                          {colors.map((c) => {
                            return (
                              <div>
                              <RadioGroup.Option
                                className=""
                                value={c}
                                key={c}
                              >
                                {c}
                              </RadioGroup.Option>
                              </div>
                            );
                          })}
                        </div>
                      </RadioGroup>

<RadioGroup value={color} onChange={setColor}>
                        <RadioGroup.Label className="mt-5 block">
                          Select a color:
                        </RadioGroup.Label>
                        <div className="">
                          {colors.map((c) => {
                            return (
                              <div>
                              <RadioGroup.Option
                                className=""
                                value={c}
                                key={c}
                              >
                                {c}
                              </RadioGroup.Option>
                              </div>
                            );
                          })}
                        </div>
                      </RadioGroup>

- - I tried this with both a links and the RadioGroup (since it was what skies used in his demo) but part of the problem is that color and setColor are not defined, I can redeclare them but I feel like that doesn't work since it's not mutating the original property - - My GOAL here isn't JUST to get this working but to also understand why it's either NOT working or what I'm overlooking, I've been googling this for about a week and been given a couple of suggestions of entirely different ways to handle this but I feel like I'm missing a basic thing here... maybe not... and though I want to get this done, it's not an urgent item but I also want to learn

9 replies

TTCTheo's Typesafe Cult

•Created by DrewHack on 7/10/2023 in #questions

Trying to setup NextAuth with middleware.tsx file - login is happening but always returns to login

Trying to setup NextAuth with middleware.tsx file - login is happening and session is created in database but page never returns to page that is behind matcher. Middleware.tsx File is: import { withAuth } from "next-auth/middleware"; export default withAuth({ secret: process.env.SECRET, }); export const config = { matcher: ["/dashboard"] } I've also tried: export { default } from "next-auth/middleware" export const config = { matcher: ["/dashboard"] } Without middleware file App Directory redirection is working fine

9 replies

Gaming

Programming