General Mudkip Posts - Answer Overflow

General Mudkip

Posts Comments

TTCTheo's Typesafe Cult

•Created by General Mudkip on 12/21/2023 in #questions

How to use Y-Axis values for Recharts linear gradient

1 replies

TTCTheo's Typesafe Cult

•Created by General Mudkip on 12/14/2023 in #questions

Clerk Webpack Importing Error

I'm trying to use the useUser() function provided with Clerk, however I'm getting this error whenever I try to compile it:

Unhandled Runtime Error

Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_1__.useUser) is not a function

Unhandled Runtime Error

Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_1__.useUser) is not a function

Here's the code:

import { UserButton, useUser } from "@clerk/nextjs";

const Sidebar = () => {
  const user = useUser();

  return (
    <header
      className="..."
    >
      <div className="...">
        <h1>Work in Progress</h1>
      </div>

      <div className="..."></div>

      <div className="...">
        <UserButton afterSignOutUrl="/" />
        <h2 className="...">Welcome, {user?.fullName}</h2>
      </div>
    </header>
  );
};

export default Sidebar;

import { UserButton, useUser } from "@clerk/nextjs";

const Sidebar = () => {
  const user = useUser();

  return (
    <header
      className="..."
    >
      <div className="...">
        <h1>Work in Progress</h1>
      </div>

      <div className="..."></div>

      <div className="...">
        <UserButton afterSignOutUrl="/" />
        <h2 className="...">Welcome, {user?.fullName}</h2>
      </div>
    </header>
  );
};

export default Sidebar;

7 replies

TTCTheo's Typesafe Cult

•Created by General Mudkip on 7/9/2023 in #questions

White flashbang for millisecond before page load

So I'm noticing an issue where when swapping between pages on my site (/about, /home, etc.) it'll momentarily flash white before the styles are loaded. I'm using Astro and Tailwind, and even sticking a

<style>
  html {
    background-color: #040A0A;
  }
</style>

<style>
  html {
    background-color: #040A0A;
  }
</style>

in the head of the page resolves the issue. Is there a way to prevent this or am I SOL?

3 replies

TTCTheo's Typesafe Cult

•Created by General Mudkip on 7/5/2023 in #questions

Headless UI Transitions

Heya, I'm trying to create a simple little animation where a dropdown menu slides down when revealed (similar to an accordion), but I can't seem to get it to properly work.

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

At the moment it just pops into/out of view after a short delay. Is there an easy way to solve this? Or a better way to do this (without Headless UI). Thanks!

9 replies

TTCTheo's Typesafe Cult

•Created by General Mudkip on 6/16/2023 in #questions

Good learning resources?

Hey, I realise that this is a (very) beginner question, but I was wondering what the best resources were for learning TS/React? I'm pretty confident with HTML/CSS/Tailwind, but my JS knowledge is pretty cobbled together and I'd like to build a good foundation before going further. Thanks in advance :)

20 replies

TTCTheo's Typesafe Cult

•Created by General Mudkip on 5/27/2023 in #questions

'Component' cannot be used as a JSX component.

11 replies

Gaming

Programming