Skip to content

Instantly share code, notes, and snippets.

@nimone

nimone/App.jsx

Last active October 15, 2025 03:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nimone/be059cc9ef0ee9c7e2694352762737b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nimone/be059cc9ef0ee9c7e2694352762737b8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nimone revised this gist Jul 17, 2023. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions App.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    import { GitHub, Twitter, Facebook, Instagram, Youtube } from "react-feather"
    import IconButton from "./components/IconButton"

    export default function App() {
    return (
    <main className="App gap-4">
    <h1 className="text-gray-700 font-medium">Checkout Our Socials</h1>
    <IconButton text="Github">
    <GitHub size={20} />
    </IconButton>
    <IconButton text="Facebook" color="bg-blue-500">
    <Facebook size={20} />
    </IconButton>
    <IconButton
    text="/ycldev"
    color="bg-gradient-to-tr from-yellow-500 to-purple-500 via-pink-500"
    >
    <Instagram size={20} />
    </IconButton>
    <IconButton text="/YourCodeLab" color="bg-sky-500">
    <Twitter size={20} />
    </IconButton>
    <IconButton text="@ycldev" color="bg-red-500">
    <Youtube size={20} />
    </IconButton>
    </main>
    )
    }
  2. nimone created this gist Jul 17, 2023.
    29 changes: 29 additions & 0 deletions IconButton.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    import { useRef } from "react"
    import { useState } from "react"

    export default function IconButton({ children, text, color, ...props }) {
    const [hovered, setHovered] = useState(false)
    const ref = useRef(null)

    return (
    <button
    onMouseEnter={() => setHovered(true)}
    onMouseLeave={() => setHovered(false)}
    className={`
    flex p-2 items-center rounded-lg
    text-white ${color || "bg-gray-600"}
    `}
    {...props}
    >
    {children}
    <div
    style={{ width: hovered ? ref.current?.offsetWidth || 0 : 0 }}
    className="overflow-x-hidden transition-all duration-300 ease-out"
    >
    <span ref={ref} className="px-1.5">
    {text}
    </span>
    </div>
    </button>
    )
    }