mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
88 lines
2.6 KiB
Plaintext
88 lines
2.6 KiB
Plaintext
---
|
|
import clsx from 'clsx';
|
|
import { AnimatedBars } from '../AnimatedBars';
|
|
|
|
const seconds = [0, 5, 10, 15, 20];
|
|
---
|
|
|
|
<AnimatedBars
|
|
className="rounded-xs border border-manila-dark bg-faded-black p-5 md:p-10 lg:p-15"
|
|
client:idle
|
|
>
|
|
<header class="text-p2">
|
|
<h3 class="font-bold text-manila-light">Download speeds</h3>
|
|
<span class="whitespace-nowrap text-manila-dark"
|
|
>(based on slow 4G connection)</span
|
|
>
|
|
</header>
|
|
<p
|
|
class="mt-6 inline-block items-center rounded-full border border-manila-light bg-faded-black px-8 py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:hidden"
|
|
>
|
|
VJS 8
|
|
</p>
|
|
<div
|
|
class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"
|
|
style="--data-bar-width: 100%; --data-bar-duration: 3.96s;"
|
|
>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<p
|
|
class="hidden min-w-30 items-center justify-center rounded-full border border-manila-light bg-faded-black py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:flex"
|
|
>
|
|
VJS 8
|
|
</p>
|
|
<p
|
|
class="flex gap-1 text-center font-display text-h5 text-manila-light uppercase lg:gap-2.5"
|
|
>
|
|
<span class="font-bold">3.96s</span>
|
|
<span>/</span>
|
|
<span class="whitespace-nowrap">200kB</span>
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="mt-6 inline-block items-center rounded-full border border-orange bg-faded-black px-8 py-0.5 text-center font-display text-h5 font-bold text-orange uppercase md:hidden"
|
|
>
|
|
VJS 10
|
|
</p>
|
|
<div
|
|
class="mt-4 mb-2 data-bar data-bar-orange md:mt-5 md:mb-2.5"
|
|
style="--data-bar-width: 18.75%; --data-bar-duration: 0.75s;"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2.5">
|
|
<p
|
|
class="hidden min-w-30 items-center justify-center rounded-full border border-orange bg-faded-black py-0 text-center font-display text-h5 font-bold text-orange uppercase md:flex"
|
|
>
|
|
VJS 10
|
|
</p>
|
|
<p
|
|
class="2xl flex gap-1 text-center font-display text-h5 text-orange uppercase lg:gap-2.5"
|
|
>
|
|
<span class="font-bold">0.75s</span>
|
|
<span>/</span>
|
|
<span class="whitespace-nowrap">38kB</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex w-full justify-between px-1 pt-4 pb-2">
|
|
{
|
|
Array.from({ length: 21 }, (_, i) => (
|
|
<div
|
|
class={clsx(
|
|
"h-4 w-px",
|
|
seconds.includes(i) ? "bg-manila-light" : "bg-warm-gray",
|
|
)}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
<div class="-mx-1.5 flex justify-between" style="width: calc(100% + 0.85rem)">
|
|
{
|
|
Array.from({ length: 5 }, (_, i) => (
|
|
<div class="w-5 text-center text-p3 text-manila-light">{i}s</div>
|
|
))
|
|
}
|
|
</div>
|
|
</AnimatedBars>
|