export default function SkillCard() {
    return (
        <div className="group flex h-20 select-none items-center justify-start rounded-xl bg-gradient-to-l from-white to-zinc-50 text-gray-800 ring-1 ring-stone-200 dark:bg-gradient-to-l dark:from-stone-900 dark:to-neutral-900 dark:text-zinc-300 dark:ring-stone-800">
            <span className="-mt-20 ml-6 rotate-45 rounded-xl bg-zinc-50 ring-1 ring-stone-200 duration-200 dark:bg-neutral-900 dark:ring-stone-800">
                <NextJSIcon
                    className="size-10 -rotate-45 rounded-xl p-2 duration-200 group-hover:p-1.5"
                    aria-hidden="true"
                />
            </span>
            <div className="w-full rounded-2xl p-4">
                <h6 className="text-md font-semibold text-zinc-800 dark:text-zinc-300">
                    Next JS
                </h6>
                <div className="grid grid-cols-5 items-center gap-2">
                    <div className="col-span-3">
                        <h5
                            className="truncate text-zinc-400 dark:text-zinc-400"
                            title="React JS Framework"
                        >
                            React JS Framework
                        </h5>
                    </div>
                    <div className="col-span-2">
                        <div className="flex space-x-0.5" title="Mid-level">
                            <div className="h-1.5 w-4 rounded-l bg-violet-400" />
                            <div className="h-1.5 w-4 bg-violet-400" />
                            <div className="h-1.5 w-4 bg-violet-400" />
                            <div className="h-1.5 w-4 bg-stone-300 dark:bg-stone-700" />
                            <div className="h-1.5 w-4 rounded-r bg-stone-300 dark:bg-stone-700" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}