File size: 3,850 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<script lang="ts">
import { store } from "../../routes/+layout.svelte";
import { gradio_logo, github_black } from "../assets";
let click_nav = false;
let show_help_menu = false;
let show_nav = false;
$: show_nav = click_nav || $store?.lg;
// $: selected_version === version && is_versioned && goto("/guides/quickstart");
</script>
<!-- 4.0 Launch BANNER -->
<div class="main-header flex-row">
<div
class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1"
>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<p class="text-md leading-6 text-gray-700">
<strong class="font-semibold"
>Custom Components Gallery<sup class="text-orange-500">NEW</sup
></strong
>
</p>
<a
href="/custom-components/gallery"
target="_blank"
class="flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md"
>Explore <span aria-hidden="true">→</span></a
>
</div>
<div class="flex flex-1 justify-end"></div>
</div>
<div
class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50"
>
<a href="/">
<img src={gradio_logo} alt="Gradio logo" />
</a>
<svg
class="h-8 w-8 lg:hidden"
viewBox="-10 -10 20 20"
on:click={() => (click_nav = !click_nav)}
>
<rect x="-7" y="-6" width="14" height="2" />
<rect x="-7" y="-1" width="14" height="2" />
<rect x="-7" y="4" width="14" height="2" />
</svg>
<nav
class:hidden={!show_nav}
class="w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8"
>
<a class="thin-link flex items-center gap-3" href="/guides/quickstart"
><span>⚡</span> <span>Quickstart</span>
</a>
<a class="thin-link flex items-center gap-3" href="/docs"
><span>✍️</span> <span>Docs</span>
</a>
<a class="thin-link flex items-center gap-3" href="/guides"
><span>💡</span> <span>Guides</span></a
>
<a class="thin-link flex items-center gap-3" href="/playground"
><span>🎢</span>
<span>Playground</span></a
>
<a
class="thin-link flex items-center gap-3"
href="/custom-components/gallery"
><span>🖼️</span>
<span>Custom Components<sup class="text-orange-500">NEW</sup></span></a
>
<div
on:mouseenter={() => (show_help_menu = true)}
on:mouseleave={() => (show_help_menu = false)}
class="group relative flex cursor-pointer items-center gap-3"
>
<span>🖐</span> <span>Community</span>
<svg
class="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
{#if show_help_menu}
<div
class="help-menu absolute top-6 w-52 flex-col bg-white shadow group-hover:flex sm:right-0"
>
<a
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
href="https://github.com/gradio-app/gradio/issues/new/choose"
target="_blank">File an Issue</a
>
<a
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
target="_blank"
href="https://discord.gg/feTf9x3ZSB">Discord</a
>
<a
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
target="_blank"
href="https://gradio.curated.co/">Newsletter</a
>
<a
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
href="/brand">Brand</a
>
</div>
{/if}
</div>
<a
class="thin-link flex items-center gap-3"
href="https://github.com/gradio-app/gradio"
>
<img src={github_black} class="w-6" alt="Github logo" />
</a>
</nav>
</div>
</div>
|