mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-11 17:40:05 -04:00
Create ExpandButton.svelte
This commit is contained in:
freearhey
parent
122d2c3a7d
commit
486bbf9a60
3 changed files with 53 additions and 72 deletions
27
src/components/ExpandButton.svelte
Normal file
27
src/components/ExpandButton.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let expanded = false
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
|
||||
on:click={() => {
|
||||
expanded = !expanded
|
||||
dispatch('click', { state: expanded })
|
||||
}}
|
||||
area-label={expanded ? 'Collapse' : 'Expand'}
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
class:rotate-90={expanded}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import ExpandButton from './ExpandButton.svelte'
|
||||
import CopyToClipboard from './CopyToClipboard.svelte'
|
||||
import JsonDataViewer from './JsonDataViewer.svelte'
|
||||
|
||||
|
|
@ -12,38 +13,18 @@
|
|||
>
|
||||
<div
|
||||
class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
|
||||
class:border-b="{expanded}"
|
||||
class:border-b={expanded}
|
||||
>
|
||||
<div class="flex space-x-3 items-center max-w-[90%] w-full">
|
||||
<button
|
||||
class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
|
||||
on:click="{() => {expanded = !expanded}}"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
class:rotate-90="{expanded}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<ExpandButton on:click={event => (expanded = event.detail.state)} />
|
||||
<a
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
|
||||
href="{guide.url}"
|
||||
title="{guide.url}"
|
||||
href={guide.url}
|
||||
title={guide.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span class="truncate">{guide.url}</span
|
||||
><span
|
||||
<span class="truncate">{guide.url}</span><span
|
||||
class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -59,16 +40,17 @@
|
|||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
></path>
|
||||
</svg> </span
|
||||
></a>
|
||||
</svg>
|
||||
</span></a
|
||||
>
|
||||
</div>
|
||||
<div class="flex shrink-0">
|
||||
<CopyToClipboard text="{guide.url}" />
|
||||
<CopyToClipboard text={guide.url} />
|
||||
</div>
|
||||
</div>
|
||||
{#if expanded}
|
||||
<div class="w-full flex px-2 py-4">
|
||||
<JsonDataViewer data="{guide}" />
|
||||
</div>
|
||||
<div class="w-full flex px-2 py-4">
|
||||
<JsonDataViewer data={guide} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import CopyToClipboard from './CopyToClipboard.svelte'
|
||||
import ExpandButton from './ExpandButton.svelte'
|
||||
import JsonDataViewer from './JsonDataViewer.svelte'
|
||||
|
||||
export let stream
|
||||
|
|
@ -12,48 +13,18 @@
|
|||
>
|
||||
<div
|
||||
class="w-full inline-flex justify-between px-3 py-2 border-gray-200 dark:border-gray-600"
|
||||
class:border-b="{expanded}"
|
||||
class:border-b={expanded}
|
||||
>
|
||||
<div class="flex space-x-3 items-center max-w-[90%] w-full">
|
||||
<button
|
||||
class="w-4 h-4 flex justify-center align-middle text-gray-500 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-600 shrink-0"
|
||||
on:click="{() => {expanded = !expanded}}"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
class:rotate-90="{expanded}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- <svg
|
||||
class="w-2 h-2 flex shrink-0"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class:fill-green-500="{stream.status === 'online'}"
|
||||
class:fill-yellow-500="{['blocked', 'timeout'].includes(stream.status)}"
|
||||
class:fill-red-500="{stream.status === 'error'}"
|
||||
>
|
||||
<circle cx="50" cy="50" r="50" />
|
||||
</svg> -->
|
||||
<ExpandButton on:click={event => (expanded = event.detail.state)} />
|
||||
<a
|
||||
class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
|
||||
href="{stream.url}"
|
||||
title="{stream.url}"
|
||||
href={stream.url}
|
||||
title={stream.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span class="truncate">{stream.url}</span
|
||||
><span
|
||||
<span class="truncate">{stream.url}</span><span
|
||||
class="inline-flex items-center pl-1 text-sm font-semibold text-gray-500 rounded-full"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -69,16 +40,17 @@
|
|||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
></path>
|
||||
</svg> </span
|
||||
></a>
|
||||
</svg>
|
||||
</span></a
|
||||
>
|
||||
</div>
|
||||
<div class="flex shrink-0">
|
||||
<CopyToClipboard text="{stream.url}" />
|
||||
<CopyToClipboard text={stream.url} />
|
||||
</div>
|
||||
</div>
|
||||
{#if expanded}
|
||||
<div class="w-full flex px-2 py-4">
|
||||
<JsonDataViewer data="{stream}" />
|
||||
</div>
|
||||
<div class="w-full flex px-2 py-4">
|
||||
<JsonDataViewer data={stream} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue