mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-05 20:43:58 +03:00
feat: skeleton for videos
This commit is contained in:
parent
f437be86c7
commit
ce520717e0
4 changed files with 54 additions and 14 deletions
25
index.html
25
index.html
|
@ -1,13 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -1,4 +1,11 @@
|
|||
import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react";
|
||||
import {
|
||||
Avatar,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
Link,
|
||||
Skeleton,
|
||||
} from "@nextui-org/react";
|
||||
import { Video } from "piped-api/dist/types";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircleIcon, EyeIcon } from "@heroicons/react/24/solid";
|
||||
|
@ -23,7 +30,7 @@ export function VideoComponent({ video }: VideoComponentProps) {
|
|||
{video.title}
|
||||
</Link>
|
||||
<Link color="foreground" href={`#${video.uploaderUrl}`}>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex flex-row items-center break-all">
|
||||
<p className="flex-none text-md">{video.uploaderName}</p>
|
||||
{video.uploaderVerified && (
|
||||
<CheckCircleIcon className="w-6 h-6 p-1" />
|
||||
|
@ -42,6 +49,19 @@ export function VideoComponent({ video }: VideoComponentProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function SkeletonVideoComponent() {
|
||||
return (
|
||||
<Card isBlurred isPressable shadow="none" className="space-y-5 p-4">
|
||||
<Skeleton className="rounded-lg">
|
||||
<div className="rounded-lg h-56 bg-default-300 p-4"></div>
|
||||
</Skeleton>
|
||||
<CardBody className="flex gap-3 flex-row">
|
||||
<Skeleton className="flex rounded-full w-12 h-12" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
type VideoComponentProps = {
|
||||
video: Video;
|
||||
};
|
||||
|
|
|
@ -1,3 +1,10 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Video } from "piped-api/dist/types";
|
||||
import { useEffect, useState } from "react";
|
||||
import { VideoComponent } from "../components/video";
|
||||
import { SkeletonVideoComponent, VideoComponent } from "../components/video";
|
||||
|
||||
export default function Trending() {
|
||||
const [trending, setTrending] = useState([] as Video[]);
|
||||
|
@ -16,6 +16,16 @@ export default function Trending() {
|
|||
}
|
||||
});
|
||||
|
||||
if (trending.length === 0) {
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{[...Array(20).keys()].map((num) => (
|
||||
<SkeletonVideoComponent key={num} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{trending.map((video) => (
|
||||
|
|
Loading…
Reference in a new issue