SneaX Posts - Answer Overflow

SneaX

Explore posts from servers

KPCKevin Powell - Community DTDrizzle Team

•Created by SneaX on 10/9/2024 in #front-end

Why does text input not shrink

I have this code, why does the text input not shrink according to its parent, it causes an overflow

<div className="text-2xl font-bold capitalize md:block hidden">{currentSection}</div>
          <div className="md:hidden"><Image src={Logo} alt="Logo" /></div>
          <div className="md:flex min-w-0 justify-center hidden">
            <input
              type="text"
              placeholder="Search"
              className="h-10 px-4 rounded-l-[10px] bg-[#F3F3F3] flex-1 min-w-0"
              ref={searchText}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  search();
                }
              }}
            />
            <button
              onClick={search}
              className="bg-[#F3F3F3] rounded-r-[10px] text-[#C2C2C2] px-2 py-2 w-fit"
            >
              <MagnifyingGlassIcon className="w-6 h-6 mx-auto" />
            </button>
          </div>
          <div className="hidden md:block">
            {isAuthenticated ? (
              <button
                onClick={logout}
                className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
              >
                Logout
              </button>
            ) : (
              <Link
                href="/login"
                className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
              >
                Login
              </Link>
            )}
          </div>

<div className="text-2xl font-bold capitalize md:block hidden">{currentSection}</div>
          <div className="md:hidden"><Image src={Logo} alt="Logo" /></div>
          <div className="md:flex min-w-0 justify-center hidden">
            <input
              type="text"
              placeholder="Search"
              className="h-10 px-4 rounded-l-[10px] bg-[#F3F3F3] flex-1 min-w-0"
              ref={searchText}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  search();
                }
              }}
            />
            <button
              onClick={search}
              className="bg-[#F3F3F3] rounded-r-[10px] text-[#C2C2C2] px-2 py-2 w-fit"
            >
              <MagnifyingGlassIcon className="w-6 h-6 mx-auto" />
            </button>
          </div>
          <div className="hidden md:block">
            {isAuthenticated ? (
              <button
                onClick={logout}
                className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
              >
                Logout
              </button>
            ) : (
              <Link
                href="/login"
                className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
              >
                Login
              </Link>
            )}
          </div>

30 replies

KPCKevin Powell - Community

•Created by SneaX on 4/27/2023 in #front-end

Discord oauth 2 error

Hey there, I have a working website that uses discord oauth authentication using next-auth.js and the sign in button redirects it to localhost even though I have changed the redirect uri and nextauth url to match my new domain name. Could anyone suggest a solution for this

22 replies

KPCKevin Powell - Community

•Created by SneaX on 4/14/2023 in #front-end

Help with JSON and typescript

I have a quiz with 3 sections, 5 levels, 4 branches json looks something like this

{
    "1":{
        "1":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "2":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "3":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "4":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "5":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        }
    },
    "2":{
        "1":{ //and so on

{
    "1":{
        "1":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "2":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "3":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "4":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        },
        "5":{
            "a":["question","hint"],
            "b":["question","hint"],
            "c":["question","hint"],
            "d":["question","hint"]
        }
    },
    "2":{
        "1":{ //and so on

How can I make an interface in typescript so that i can access the branch like const q = data.1.1."a" or maybe modify the json file in a way that makes it work

3 replies

KPCKevin Powell - Community

•Created by SneaX on 4/11/2023 in #front-end

Need help with json in typescript

I have a json file

{
    "1a": {
      "mainHint": "hello",
      "commentHint": "yay"
    },
    "2a": {
      "mainHint": "hello2",
      "commentHint": "yay2"
    },
    "3a": {
      "mainHint": "hello3",
      "commentHint": "yay3"
    },
    "4a": {
      "mainHint": "hello4",
      "commentHint": "yay4"
    }
}

{
    "1a": {
      "mainHint": "hello",
      "commentHint": "yay"
    },
    "2a": {
      "mainHint": "hello2",
      "commentHint": "yay2"
    },
    "3a": {
      "mainHint": "hello3",
      "commentHint": "yay3"
    },
    "4a": {
      "mainHint": "hello4",
      "commentHint": "yay4"
    }
}

Now I want to access it in typescript as follows

"use client";
import levels from '../leveldat.json'

const Level=({level, branch}: {level:string, branch:string})=>{
    
    console.log(levels[`${level}${branch}`])
    return <p>{}</p>
}

export default Level

"use client";
import levels from '../leveldat.json'

const Level=({level, branch}: {level:string, branch:string})=>{
    
    console.log(levels[`${level}${branch}`])
    return <p>{}</p>
}

export default Level

But it shows Element implicitly has an 'any' type because expression of type 'string How can I fix this

1 replies

KPCKevin Powell - Community

•Created by SneaX on 4/8/2023 in #back-end

Need help modelling a mysql prisma schema

I am currently making a quiz-type website and need a database setup for that, however I do not know how to model it in prisma, any help would be appreciated. I want to have one table with all the users, who will have all the standard attributes along with one organisation attribute. I need one table that will log the users attempts, and one table with all the organisations

4 replies

KPCKevin Powell - Community

•Created by SneaX on 3/27/2023 in #back-end

Need help on deciding a web stack

I am currently in highschool, and pretty decent in javascript and python, and I need to build a website that will have users, and levels for a quiz. While I have looked around and the general consensus is using firebase for the backend with either vue or react, I was wondering what would be the easiest and most beginner friendly path to choose as someone new to back end web development

40 replies

Gaming

Programming