ademondev
ademondev
Explore posts from servers
SIASapphire - Imagine a framework
Created by ademondev on 2/14/2024 in #sapphire-support
How do interaction handlers pair up with commands
Hello! I'm trying to develop a little discord bot and I loved how complete the sapphire framework is. I've come across the interaction handlers section and tried to implement a command using a Select Menu one. The thing is, to trigger an interaction handler I first need to "make" the interaction through a command (like displaying a button). Let's say the command has a name param, how can I give the interaction-handler that information? Am I not using the right tool for what I'm trying to do?
7 replies
KPCKevin Powell - Community
Created by ademondev on 9/28/2023 in #front-end
weird white gap on the bottom while scrolling down mobile
No description
27 replies
KPCKevin Powell - Community
Created by ademondev on 3/18/2023 in #ui-ux
I'm making my first blog, feedback?
29 replies
KPCKevin Powell - Community
Created by ademondev on 3/7/2023 in #front-end
Why is my nav not responsive?
I don't know why my header is not responsive. I've been looking around for about an hour and I can't seem to find what's wrong. What's the problem with my code? I'm using tailwind for the styling, the rest is pure React.
import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
{
content: 'Download'
},
{
content: 'Nitro'
},
{
content: 'Discover'
},
{
content: 'Safety'
},
{
content: 'Support'
},
{
content: 'Blog'
},
{
content: 'Careers'
}
];

export const Header: FC<Props> = (props) => {
return (
<header>
<nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
<DiscordLogo className='text-white' />
<ul className='flex flex-row'>
{headerLinks.map((link, index) => (
<HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
p-3 mx-3'>
{link.content}
</HeaderLink>
))}
</ul>
<Button className='rounded-full bg-white text-black cursor-pointer
hover:shadow-lg
hover:text-blurple transition
duration-200 ease-in-out
'
>
Login
</Button>
</nav>
</header>
)
}

interface HeaderLinkProps {
children: ReactNode;
content: string;
className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
return (
<li className='px-4'>
<a href='#' className={`${className}`}>
{children}
</a>
</li>
)
}
import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
{
content: 'Download'
},
{
content: 'Nitro'
},
{
content: 'Discover'
},
{
content: 'Safety'
},
{
content: 'Support'
},
{
content: 'Blog'
},
{
content: 'Careers'
}
];

export const Header: FC<Props> = (props) => {
return (
<header>
<nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
<DiscordLogo className='text-white' />
<ul className='flex flex-row'>
{headerLinks.map((link, index) => (
<HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
p-3 mx-3'>
{link.content}
</HeaderLink>
))}
</ul>
<Button className='rounded-full bg-white text-black cursor-pointer
hover:shadow-lg
hover:text-blurple transition
duration-200 ease-in-out
'
>
Login
</Button>
</nav>
</header>
)
}

interface HeaderLinkProps {
children: ReactNode;
content: string;
className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
return (
<li className='px-4'>
<a href='#' className={`${className}`}>
{children}
</a>
</li>
)
}
10 replies