this repo has no description
1'use client';
2
3import { NextLogo } from '#/components/next-logo';
4import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
5
6import clsx from 'clsx';
7import { useState } from 'react';
8import Byline from '#/components/byline';
9import {
10 delayRecommendedProducts,
11 delayReviews,
12 delayShippingEstimate,
13} from '#/lib/delay';
14
15export function Sidebar() {
16 const [isOpen, setIsOpen] = useState(false);
17
18 return (
19 <div className="fixed top-0 z-20 flex w-full flex-col border-b border-gray-800 bg-black lg:bottom-0 lg:z-auto lg:w-72 lg:border-b-0 lg:border-r lg:border-gray-800">
20 <div className="flex h-14 items-center px-4 py-4 lg:h-auto">
21 <div className="group flex w-full items-center gap-x-2.5">
22 <div className="h-7 w-7 rounded-full border border-white/30">
23 <NextLogo />
24 </div>
25
26 <h3 className="font-semibold tracking-wide text-gray-400">
27 Partial Prerendering
28 </h3>
29 </div>
30 </div>
31 <button
32 type="button"
33 className="group absolute right-0 top-0 flex h-14 items-center gap-x-2 px-4 lg:hidden"
34 onClick={() => setIsOpen(!isOpen)}
35 >
36 <div className="font-medium text-gray-100 group-hover:text-gray-400">
37 Menu
38 </div>
39 {isOpen ? (
40 <XMarkIcon className="block w-6 text-gray-400" />
41 ) : (
42 <Bars3Icon className="block w-6 text-gray-400" />
43 )}
44 </button>
45
46 <div
47 className={clsx('overflow-y-auto lg:static lg:block', {
48 'fixed inset-x-0 bottom-0 top-14 mt-px bg-black': isOpen,
49 hidden: !isOpen,
50 })}
51 >
52 <div className="prose prose-sm prose-invert max-w-none space-y-6 px-4 pb-20 text-gray-300">
53 <div className="text-gray-400">
54 <p>
55 <span className="font-bold text-vercel-pink">Pink dots</span>{' '}
56 denote artificially delayed responses for demo purposes:
57 </p>
58 <ul>
59 <li>Shipping estimate → {delayShippingEstimate}ms</li>
60 <li>Recommended products → {delayRecommendedProducts}ms</li>
61 <li>Reviews → {delayReviews}ms</li>
62 </ul>
63 </div>
64
65 <p>
66 <a
67 target="_blank"
68 href="https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model"
69 >
70 Partial Prerendering
71 </a>{' '}
72 combines ultra-quick static edge delivery with fully dynamic
73 capabilities. This is different from how your application behaves
74 today, where entire routes are either fully static or dynamic.
75 </p>
76 <p>How it works:</p>
77 <ul>
78 <li>
79 A static route <em>shell</em> is served immediately, this makes
80 the initial load fast.
81 </li>
82 <li>
83 The shell leaves <em>holes</em> where dynamic content (that might
84 be slower) will be streamed in to minimize the perceived overall
85 page load time.
86 </li>
87 <li>
88 The async holes are loaded in parallel, reducing the overall load
89 time of the page.
90 </li>
91 </ul>
92 <p className="text-gray-400">
93 Try refreshing the page to restart the demo.
94 </p>
95 </div>
96 <Byline className="absolute hidden sm:block" />
97 </div>
98 </div>
99 );
100}