am dumb
This commit is contained in:
parent
a18e50d990
commit
c69bdb92e8
@ -18,9 +18,8 @@ export const columns: ColumnDef<chunithm>[] = [
|
||||
header: "Title",
|
||||
|
||||
cell: ({ row }) => {
|
||||
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
||||
const handleImageLoad = () => {
|
||||
setIsLoading(false);
|
||||
};
|
||||
@ -30,24 +29,18 @@ export const columns: ColumnDef<chunithm>[] = [
|
||||
};
|
||||
return (
|
||||
<div className="flex w-[300px] items-center truncate font-medium">
|
||||
{jacketPath && (
|
||||
<>
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[70px] w-[70px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
{isLoading && (
|
||||
<Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!jacketPath && (
|
||||
<Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
|
||||
{jacketPath ? (
|
||||
<img
|
||||
src={`/JacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[70px] w-[70px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="mr-2 inline-block h-8 w-8" />
|
||||
)}
|
||||
<span className="truncate">{row.original.title}</span>
|
||||
</div>
|
||||
|
@ -47,24 +47,14 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
|
||||
return (
|
||||
<div key={index} className="flex flex-col items-center p-2">
|
||||
<div className="font-bold"></div>
|
||||
{jacketPath && (
|
||||
<>
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
{isLoading && (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!jacketPath && (
|
||||
{!jacketPath ? (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
) : (
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className="mr-2 inline-block h-[100px] w-[100px]"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<ul className="mt-2 text-center">
|
||||
|
@ -31,12 +31,11 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
||||
{" "}
|
||||
{chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
|
||||
".dds",
|
||||
".png",
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const handleImageLoad = () => {
|
||||
setIsLoading(false);
|
||||
@ -45,27 +44,20 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
|
||||
const handleImageError = () => {
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={index} className="flex flex-col items-center p-2">
|
||||
<div className="font-bold"></div>
|
||||
{jacketPath && (
|
||||
<>
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
{isLoading && (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!jacketPath && (
|
||||
{jacketPath ? (
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
)}
|
||||
<ul className="mt-2 text-center">
|
||||
|
@ -46,23 +46,17 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
|
||||
return (
|
||||
<div key={index} className="flex flex-col items-center p-2">
|
||||
<div className="font-bold"></div>
|
||||
{jacketPath && (
|
||||
<>
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
{isLoading && (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!jacketPath && (
|
||||
{jacketPath ? (
|
||||
<img
|
||||
src={`/jacketArts/${jacketPath}`}
|
||||
alt="Jacket"
|
||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
||||
isLoading ? "hidden" : ""
|
||||
}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
||||
)}
|
||||
<div>
|
||||
|
Loading…
Reference in New Issue
Block a user