mac.dev Posts - Answer Overflow

mac.dev

Posts Comments

TTCTheo's Typesafe Cult

•Created by mac.dev on 8/16/2023 in #questions

React-Hook-Form Issue

I attached the code, there is no errors, it just seems the handleformsubmit function isn't firing, and idk why

8 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 4/15/2023 in #questions

Make this typesafe pls

const FeaturesMobile: React.FC = () => {
  let [activeIndex, setActiveIndex] = useState(0);
  let slideContainerRef = useRef<any>(null);
  let slideRefs = useRef<any>([]);

  useEffect(() => {
    if (!slideContainerRef.current) {
      return;
    }

    let observer = new window.IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        let activeSlide = entries.find((entry) => entry.isIntersecting);
        if (activeSlide) {
          setActiveIndex(
            slideRefs.current.indexOf(activeSlide.target as HTMLInputElement)
          );
        }
      },
      {
        root: slideContainerRef.current,
        threshold: 0.6,
      }
    );

    for (let slide of slideRefs.current) {
      if (slide) {
        observer.observe(slide);
      }
    }

    return () => {
      observer.disconnect();
    };
  }, [slideContainerRef, slideRefs]);

  return (
    <>
      <div
        ref={slideContainerRef}
        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
      >
        {features.map((feature, featureIndex) => (
          <div
            key={featureIndex}
            ref={(ref) => (slideRefs.current[featureIndex] = ref)}
            className="w-full flex-none snap-center px-4 sm:px-6"
          >
            <div className="relative transform overflow-hidden rounded-2xl bg-neutral-800 px-5 py-6">
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                <CircleBackground
                  color="#13B5C8"
                  className={featureIndex % 2 === 1 ? "rotate-180" : undefined}
                />
              </div>
              <PhoneFrame className="relative mx-auto w-full max-w-[366px]">
                <feature.screen />
              </PhoneFrame>
              <div className="absolute inset-x-0 bottom-0 bg-neutral-800/95 p-6 backdrop-blur sm:p-10">
                <feature.icon className="h-8 w-8" />
                <h3 className="mt-6 text-sm font-semibold text-neutral-50 sm:text-lg">
                  {feature.name}
                </h3>
                <p className="mt-2 text-sm text-neutral-400">
                  {feature.description}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6 flex justify-center gap-3">
        {features.map((_, featureIndex) => (
          <button
            type="button"
            key={featureIndex}
            className={clsx(
              "relative h-0.5 w-4 rounded-full",
              featureIndex === activeIndex ? "bg-neutral-300" : "bg-neutral-500"
            )}
            aria-label={`Go to slide ${featureIndex + 1}`}
            onClick={() => {
              slideRefs.current[featureIndex].scrollIntoView({
                block: "nearest",
                inline: "nearest",
              });
            }}
          >
            <span className="absolute -inset-x-1.5 -inset-y-3" />
          </button>
        ))}
      </div>
    </>
  );
};

const FeaturesMobile: React.FC = () => {
  let [activeIndex, setActiveIndex] = useState(0);
  let slideContainerRef = useRef<any>(null);
  let slideRefs = useRef<any>([]);

  useEffect(() => {
    if (!slideContainerRef.current) {
      return;
    }

    let observer = new window.IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        let activeSlide = entries.find((entry) => entry.isIntersecting);
        if (activeSlide) {
          setActiveIndex(
            slideRefs.current.indexOf(activeSlide.target as HTMLInputElement)
          );
        }
      },
      {
        root: slideContainerRef.current,
        threshold: 0.6,
      }
    );

    for (let slide of slideRefs.current) {
      if (slide) {
        observer.observe(slide);
      }
    }

    return () => {
      observer.disconnect();
    };
  }, [slideContainerRef, slideRefs]);

  return (
    <>
      <div
        ref={slideContainerRef}
        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
      >
        {features.map((feature, featureIndex) => (
          <div
            key={featureIndex}
            ref={(ref) => (slideRefs.current[featureIndex] = ref)}
            className="w-full flex-none snap-center px-4 sm:px-6"
          >
            <div className="relative transform overflow-hidden rounded-2xl bg-neutral-800 px-5 py-6">
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                <CircleBackground
                  color="#13B5C8"
                  className={featureIndex % 2 === 1 ? "rotate-180" : undefined}
                />
              </div>
              <PhoneFrame className="relative mx-auto w-full max-w-[366px]">
                <feature.screen />
              </PhoneFrame>
              <div className="absolute inset-x-0 bottom-0 bg-neutral-800/95 p-6 backdrop-blur sm:p-10">
                <feature.icon className="h-8 w-8" />
                <h3 className="mt-6 text-sm font-semibold text-neutral-50 sm:text-lg">
                  {feature.name}
                </h3>
                <p className="mt-2 text-sm text-neutral-400">
                  {feature.description}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6 flex justify-center gap-3">
        {features.map((_, featureIndex) => (
          <button
            type="button"
            key={featureIndex}
            className={clsx(
              "relative h-0.5 w-4 rounded-full",
              featureIndex === activeIndex ? "bg-neutral-300" : "bg-neutral-500"
            )}
            aria-label={`Go to slide ${featureIndex + 1}`}
            onClick={() => {
              slideRefs.current[featureIndex].scrollIntoView({
                block: "nearest",
                inline: "nearest",
              });
            }}
          >
            <span className="absolute -inset-x-1.5 -inset-y-3" />
          </button>
        ))}
      </div>
    </>
  );
};

6 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 1/28/2023 in #questions

Make a button which downloads PDF

I know this is a noob question, but I haven't actually done this before. I have a nextjs web page. I want to make a button which downloads my resume as a pdf. How would I do this ?

4 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 1/10/2023 in #questions

I want to register the selected object using Zod and react-forms

I have quite a large component.

8 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 1/4/2023 in #questions

Making a form with Zod

I have made my form, its all styled and functional (currently logs the data). I just cant figure out how to display the image as an image within the data.

1 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 12/8/2022 in #questions

Aligning the right side of an image with the left side of a grid col

34 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/19/2022 in #questions

converting TailwindUI syntax documentation to a page in my app.

Hey I’m just struggling to convert the Syntax docs template from TailwindUI into a page in my application.

10 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/19/2022 in #questions

Im converting my old code to Typescript, I need help with a functions.

Howdy, im just converting some of my old code to Typescript from JS and I am struggling with a few functions. Answers would be amazing.

3 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/17/2022 in #questions

basic js logic question

I have x2 arrays: QuestBotGuildIds = an array of Id’s from my db. UserGuilds = an array basic guild information for every guild. I want to get all of the UserGuilds with an id === one of the guilds in QuestBotGuildId’s. Without a for loop as the QuestBotGuildId’s is an api request, so is UserGuilds.

9 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/16/2022 in #questions

NextAuth Middleware config

Hey guys, first time I've used middleware, I just need a hand.

6 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/14/2022 in #questions

Middleware redirect

I am currently having issues redirecting users to the login screen. User story: a user is not logged in and they click the 'dashboard' button, the button should redirect them to the nextauth login screen.

13 replies

TTCTheo's Typesafe Cult

•Created by mac.dev on 11/7/2022 in #questions

NextAuth Discord Getting Guilds

I've been trying to do this for hours now, how do I fetch the users guilds via NextAuth ? I then want to store the guilds within the guilds within the token. Spoon Feeding would be amazing, I have depression because of this.

40 replies

Gaming

Programming