mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
fix gradient
This commit is contained in:
@@ -4,47 +4,28 @@ import { useEffect, useState } from "react";
|
||||
|
||||
const NpmPackage = () => {
|
||||
const [version, setVersion] = useState("");
|
||||
const [versionLoading, setVersionLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const getLatestVersion = async () => {
|
||||
setVersionLoading(true);
|
||||
const res = await fetch(
|
||||
"https://registry.npmjs.org/create-better-t-stack/latest",
|
||||
);
|
||||
const data = await res.json();
|
||||
setVersionLoading(false);
|
||||
setVersion(data.version);
|
||||
};
|
||||
getLatestVersion();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block"
|
||||
>
|
||||
<span className="absolute inset-0 overflow-hidden rounded-full">
|
||||
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<span className="inline-block w-3 h-5 bg-blue-400 animate-pulse mr-2" />
|
||||
<span className="text-gray-300 text-xl font-mono">
|
||||
{versionLoading ? "[v1.0.0]" : `[v${version}]`}
|
||||
</span>
|
||||
<div className="relative flex space-x-2 items-center z-10 rounded-full backdrop-blur-3xl bg-gradient-to-tr from-purple-900/50 via-pink-900/50 to-yellow-900/10 py-0.5 px-4 ring-1 ring-white/10 ">
|
||||
<span>create-better-t-stack@{version}</span>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>arrow</title>
|
||||
<path
|
||||
d="M10.75 8.75L14.25 12L10.75 15.25"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user