60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import Skeleton from "react-loading-skeleton";
|
|
import "react-loading-skeleton/dist/skeleton.css";
|
|
const AskeletonArticle = () => {
|
|
return (
|
|
<>
|
|
<Skeleton count={1} />
|
|
<div className="flex flex-col gap-4 pb-4">
|
|
<Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
|
|
<Skeleton count={1} containerClassName="authors w-1/4" />
|
|
<hr></hr>
|
|
</div>
|
|
<div className="interActions-buttons flex">
|
|
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
|
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
|
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
|
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
|
</div>
|
|
<div className=" my-10 flex flex-col gap-2">
|
|
<Skeleton
|
|
count={1}
|
|
className="keywords-title text-2xl"
|
|
containerClassName="w-1/4"
|
|
/>
|
|
<div className="flex">
|
|
<Skeleton
|
|
count={1}
|
|
className="border-2 border-[#ebebeb]"
|
|
containerClassName="w-1/6 mr-2"
|
|
baseColor="transparent"
|
|
/>
|
|
<Skeleton
|
|
count={1}
|
|
className="border-2 border-[#ebebeb]"
|
|
containerClassName="w-1/6 mr-2"
|
|
baseColor="transparent"
|
|
/>
|
|
<Skeleton
|
|
count={1}
|
|
className="border-2 border-[#ebebeb]"
|
|
containerClassName="w-1/6 mr-2"
|
|
baseColor="transparent"
|
|
/>
|
|
<Skeleton
|
|
count={1}
|
|
className="border-2 border-[#ebebeb]"
|
|
containerClassName="w-1/6 mr-2"
|
|
baseColor="transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="my-10 flex flex-col gap-2">
|
|
<Skeleton count={1} width={200} className="text-2xl" />
|
|
<Skeleton count={25} />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AskeletonArticle;
|