Spaces:
Paused
Paused
| <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd"> | |
| <div class="max-md:hidden bg-gray-900/20 pt-12 px-6"> | |
| <button | |
| class="border px-12 py-2.5 rounded-lg bg-gray-800/20 border border-gray-800/50 shadow w-full" | |
| >New Chat</button | |
| > | |
| </div> | |
| <div class="overflow-y-auto"> | |
| <div class="max-w-4xl mx-auto px-5 pt-12 flex flex-col gap-8"> | |
| {#each Array(4) as _} | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-3.5 w-3.5 flex-none rounded-full shadow-lg shadow-white/40" | |
| /> | |
| <div | |
| class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5" | |
| > | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing iciis? Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Rem, qui consequatur voluptas inventore recusandae animi voluptate consectetur aperiam, | |
| sapiente aliqm possimus quasi accusamus, dolores nobis officiis vitae tenetur? Porro, | |
| corporis. | |
| </div> | |
| </div> | |
| <div class="mb-2 flex items-start justify-start gap-4 text-gray-300/80"> | |
| <div class="mt-4 h-3.5 w-3.5 flex-none rounded-full" /> | |
| <div class="rounded-2xl px-5 py-3.5"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum | |
| </div> | |
| </div> | |
| {/each} | |
| <div class="h-32" /> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-center justify-center absolute left-[256px] right-0 px-5 bottom-0 h-32 bg-gradient-to-t from-black to-black/0" | |
| > | |
| <div | |
| class="shadow-alternate relative flex items-center rounded-xl border border-gray-100 dark:bg-gray-950" | |
| > | |
| <svg | |
| class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" | |
| aria-hidden="true" | |
| focusable="false" | |
| role="img" | |
| width="1em" | |
| height="1em" | |
| preserveAspectRatio="xMidYMid meet" | |
| viewBox="0 0 32 32" | |
| ><path | |
| d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z" | |
| fill="currentColor" | |
| /></svg | |
| > | |
| <input | |
| class="flex-1 border-none bg-transparent px-1 py-2 pr-3 pl-10 outline-none placeholder:text-gray-400" | |
| placeholder="Search anything on the Hub" | |
| /> | |
| </div> | |
| <!-- <input | |
| type="text" | |
| placeholder="Type anything..." | |
| class="w-full rounded-2xl border border-black bg-black px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1 max-w-4xl" | |
| /> --> | |
| </div> | |
| </div> | |