Breaking News: Grepper is joining You.com. Read the official announcement!

fallback states cool transition with tailwind css

Doyin Atobaru answered on September 11, 2023 Popularity 1/10 Helpfulness 1/10

answer fallback states cool transition with tailwind css

related jupyter notebook install

fallback states cool transition with tailwind css

Comment

import { ReloadIcon } from '@radix-ui/react-icons'
import { LoaderCircleIcon } from 'lucide-react'

@layer utilities {

   .reload-btn {
        animation: slideDown 0.5s ease-out forwards;
    }
    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


export const LoadingState = ({ message }: { message: string }) => (
    <div className="flex flex-col justify-center items-center h-3/4 gap-2">
        <p>{message}</p>
        <span className="animate-spin">
            <LoaderCircleIcon />
        </span>
    </div>
)

export const ErrorState = ({ message, onReload }: { message: string; onReload: () => void }) => (
    <div className="flex flex-col justify-center items-center h-3/4 gap-2">
        <p className="text-center text-red-500">{message}</p>
        <button
            className="reload-btn flex items-center justify-center rounded-full w-8 h-8 bg-[#17151F]/90 text-white ring-offset-background transition-all duration-500 ease-out opacity-0 translate-y-[-20px] 
            hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
            onClick={onReload}
        >
            <ReloadIcon />
        </button>
    </div>
)

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: fallback javascript states tailwind-css transition

Link to this answer
Share Copy Link

Contributed on Oct 27 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

jupyter notebook install

Comment

pip install jupyter

Popularity 10/10 Helpfulness 4/10 Language python

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

fallback states cool transition with tailwind css

Contents

More Related Answers

fallback states cool transition with tailwind css

Closely Related Answers

jupyter notebook install

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.