feat: share button added

This commit is contained in:
Timothy J. Baek 2023-12-14 01:05:38 -08:00
parent 39bce7bd42
commit c9d8645aba
3 changed files with 63 additions and 40 deletions

View File

@ -5,16 +5,16 @@
import { chatId } from '$lib/stores'; import { chatId } from '$lib/stores';
export let title: string = 'Ollama Web UI'; export let title: string = 'Ollama Web UI';
export let shareEnabled: boolean = false;
</script> </script>
<div <nav
class=" fixed top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-full z-30" id="nav"
class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
> >
<div class="basis-full"> <div class=" flex max-w-3xl w-full mx-auto px-3">
<nav class="py-3" id="nav"> <div class="flex w-full max-w-full">
<div class=" flex max-w-3xl mx-auto px-3"> <div class="pr-2 self-center">
<div class="flex w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
<div class="pr-2">
<button <button
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition" class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={async () => { on:click={async () => {
@ -40,13 +40,36 @@
</div> </div>
</button> </button>
</div> </div>
<div <div class=" flex-1 self-center font-medium text-ellipsis whitespace-nowrap overflow-hidden">
class=" flex-1 self-center font-medium overflow-hidden text-ellipsis whitespace-nowrap w-[80vw] pr-4"
>
{title != '' ? title : 'Ollama Web UI'} {title != '' ? title : 'Ollama Web UI'}
</div> </div>
{#if shareEnabled}
<div class="pl-2">
<button
class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
on:click={async () => {
console.log('share');
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"
/>
<path
d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
/>
</svg>
</div>
</button>
</div>
{/if}
</div> </div>
</div> </div>
</nav> </nav>
</div>
</div>

View File

@ -566,7 +566,7 @@
}} }}
/> />
<Navbar {title} /> <Navbar {title} shareEnabled={messages.length > 0} />
<div class="min-h-screen w-full flex justify-center"> <div class="min-h-screen w-full flex justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">

View File

@ -579,7 +579,7 @@
/> />
{#if loaded} {#if loaded}
<Navbar {title} /> <Navbar {title} shareEnabled={messages.length > 0} />
<div class="min-h-screen w-full flex justify-center"> <div class="min-h-screen w-full flex justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">