Forem: etcroot

Simple FAQ Collapse

etcroot — Sat, 08 Oct 2022 10:40:24 +0000

Was in the process of making collapsable divs with NextJS when building a FAQ page so I figured I’d share it here with you guys aswell!

Libraries used:

React-Icons
TailwindCSS
React

So for starters I made a FAQ component which I put inside /components, this is the resulting code:

import { RiQuestionLine } from "react-icons/ri";
import { useState } from "react";

export function FaqList(props) {
  return <div className="faq-list">{props.children}</div>;
}

export function FaqItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq-item">
      <div onClick={() => setOpen(!open)} className="faq-header">
        <div className="faq-icon-wrap">
          <RiQuestionLine className="faq-icon" />
        </div>
        <h3 className="faq-title">{props.title}</h3>
      </div>
      {open && (
        <div className="faq-body">
          <p className="faq-text">{props.children}</p>
        </div>
      )}
    </div>
  );
}

And then I import the respective component into my FAQ page to be able to build the FAQ’s, and this code is structured like this:

<FaqList>
    <FaqItem title="Why is the apprentice role prioritised in developer list?">
      Because we believe in giving apprentice developers a chance to get a
          foot into the industry.
    </FaqItem>
    <FaqItem title="What is this?">
      This is a demo of the ReactJS framework.
    </FaqItem>
</FaqList>

Here’s the CSS:

/* FAQ COMPONENT */
  .faq-list {
    @apply flex flex-col space-y-2;
  }
  .faq-item {
    @apply flex flex-col gap-2;
  }
  .faq-header {
    @apply flex items-center gap-2 cursor-pointer bg-indigo-100 rounded-md p-2 select-none;
  }
  .faq-icon-wrap {
    @apply flex items-center justify-center p-1.5 rounded-md bg-indigo-500 text-white;
  }
  .faq-icon {
    @apply w-4 h-4;
  }
  .faq-title {
    @apply font-medium text-indigo-500;
  }
  .faq-body {
    @apply flex flex-col gap-2 py-3 px-5;
  }
  .faq-text {
    @apply text-xs italic text-gray-700 max-w-3xl;
  }

Keep in mind that you will need to use Tailwinds built in compiler using postcss and so on so you’ll be able to use the @apply function inside of your css. This will also only work in globals.css and not the module based css files.

The result should be something like this:

Feel free to correct me below if I’ve said something wrong or if you want to give feedback to this.

Regards, etcroot.

Dynamically Using mailto:

etcroot — Wed, 28 Sep 2022 22:21:08 +0000

If you want to use mailto: tag when you're handling emails you can do this simple trick to make life easier for the consumers.

Been using mailto: the normal way until I found out you can actually customize it way more.

Here's what I use for my site (Slightly edited to not advertise)

`mailto:${contact}?subject=Application for ${title}&body=Hi ${username}, I am interested in your listing for ${title} that I found listed on [R E D A C T E D]. I would like to know more about it.`

The queries you're able to use are:

mailto: (to set the recipent, you can separate this with commas)
&subject= (this will set the subject for the email, use URL encoding if you're sending long messages)
&body= (Same as subject but instead you're setting the actual email message)
&cc= (Setting CC recipents)
&bcc (Setting BCC recipents)

Hope this helped!

Fun way to handle node status codes

etcroot — Mon, 12 Sep 2022 14:49:05 +0000

So, I was setting up some routes for my API & I had to setup some error fallbacks. And I figured out a fun and dynamic way of doing this, so instead of sending a response message to the endpoint I decided to redirect the user to a dynamic status page. Here's how I did it. (This is for NextJS)

Make a directory in /pages/ called "status", then make a .js file named [code].js & inside that code I use this:

import { useRouter } from "next/router";

export default function NodeStatus() {
  const router = useRouter();
  const { status } = router.query;
  return (
    <div className="node__status__page">
      <img
        src={`https://http.cat/${status}`}
        className="w-full h-full max-w-lg"
      />
    </div>
  );
}

Then the way I handle the request depending on what error it is I use this simple line:

res.status(500).redirect(`/status/${res.statusCode}`);

I know it's not very beautiful code but I hope someone will see it as useful! ^^ Thank you!

How i made a easter egg function in next.js

etcroot — Tue, 01 Feb 2022 16:04:23 +0000

I needed a basic function in NextJS where if you press a key combination a specific number of times the given object or content will be shown/hidden. I'm in no way an expert in NextJS but this is the solution I came up with, which seems to work flawlessly.

The library I used for this was react-use-keypress, this was the only one I found that functioned the way i wanted it to. Down below is the code.

import useKeypress from 'react-use-keypress';
import { useState } from 'react';

export function ShowSomething() {
    const [shown, setShown] = useState(false);
    const [count, setCount] = useState(0);
    // Use keypress library
    useKeypress('e', (e) => {
        setCount(count+1);
        if(count < 4) return;
        if(shown) setShown(false);
        if(!shown) setShown(true);
        if(count >= 5) setCount(0);
    });
    // Return to dom
    return <div className={`${shown ? 'visible' : 'hidden'} other-classes`}>Something to show</div>
}

The shown state is the one deciding wether or not the element gets shown or not & the counter is to see how many times the key was pressed. Then if the count is lower than 4 it'll not show the given content, however if it's past the 4 check it'll return shown depending wether the state is shown or not. Lastly the last check in the useKeypress is to see if the value is above or equal to 5 that will basically reset the counter.

Hope you enjoy!