aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Toggle.svelte
blob: 3516e48b7873a9ceec2b91a45f02950839bb442e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
<script>
	export let id;
	export let value;
</script>

<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
	<input type="checkbox" bind:checked={value} {id} name={id} class="sr-only peer" />
	<div
		class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-gray-600"
	/>
</label>
r.Hex */ .highlight .mi { color: #00D; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #00D; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #D20; background-color: #FFF0F0 } /* Literal.String.Affix */ .highlight .sb { color: #D20; background-color: #FFF0F0 } /* Literal.String.Backtick */ .highlight .sc { color: #D20; background-color: #FFF0F0 } /* Literal.String.Char */ .highlight .dl { color: #D20; background-color: #FFF0F0 } /* Literal.String.Delimiter */ .highlight .sd { color: #D20; background-color: #FFF0F0 } /* Literal.String.Doc */ .highlight .s2 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Double */ .highlight .se { color: #04D; background-color: #FFF0F0 } /* Literal.String.Escape */ .highlight .sh { color: #D20; background-color: #FFF0F0 } /* Literal.String.Heredoc */ .highlight .si { color: #33B; background-color: #FFF0F0 } /* Literal.String.Interpol */ .highlight .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */ .highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */ .highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */ .highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */ .highlight .bp { color: #038 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #369 } /* Name.Variable.Class */ .highlight .vg { color: #D70 } /* Name.Variable.Global */ .highlight .vi { color: #33B } /* Name.Variable.Instance */ .highlight .vm { color: #369 } /* Name.Variable.Magic */ .highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */
<script>
	import { browser } from '$app/environment';
	import { onMount } from 'svelte';
	import { Icon, PageNotFound } from '$comp';
	import { copy } from '$lib/utils';
	import { t } from '$lib/translations';
	export let data;

	let { subject } = data;

	let lightningAddress = `${data?.username}@coinos.io`;

	onMount(async () => {
		if (browser) {
			let { default: QRCodeStyling } = await import('qr-code-styling');
			const qrCode = new QRCodeStyling({
				width: window.screen.width < 640 ? 250 : 300,
				type: 'canvas',
				data: lightningAddress,
				image: '/images/invoice.svg',
				backgroundOptions: {
					color: 'rgba(0, 0, 0, 0)'
				},
				dotsOptions: {
					type: 'rounded'
				},
				imageOptions: {
					hideBackgroundDots: false
				}
			});

			qrCode.append(document.getElementById('qr'));
		}
	});

	let followed = false;
</script>

<svelte:head>
	<title>coinos - {subject.username}</title>
	<meta name="lightning" content={`lnurlp:${subject.username}@coinos.io`} />

	{#if subject.profile}
		<meta name="og:image" content={`/api/public/${subject.username}-profile.webp`} />
	{/if}
</svelte:head>

<div class="container px-4 flex flex-wrap">
	<div class="p-10 pt-20">
		<h1 class="text-3xl font-bold">{subject.username}</h1>

		<p class="text-secondary w-64">
			{subject.address && subject.address !== 'null' ? subject.address : ''}
		</p>

		<!-- TODO
      we need to hook this up
      <button
      class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
      on:click={() => (followed = !followed)}
      ><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
      {$t('user.' + (followed ? 'remove' : 'follow'))}
      </button>
    -->
	</div>

	<div class="space-y-5 md:mt-20 mx-auto w-[350px]">
		<!-- <div class="flex justify-center gap-2"> -->
		<!-- 	<a href={`/${subject.username}`}> -->
		<!-- 		<button -->
		<!-- 			class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2 bg-black text-white" -->
		<!-- 			>Lightning</button -->
		<!-- 		> -->
		<!-- 	</a> -->
		<!-- 	<a href={`/${subject.username}/bitcoin`}> -->
		<!-- 		<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2" -->
		<!-- 			>Bitcoin</button -->
		<!-- 		> -->
		<!-- 	</a> -->
		<!-- </div> -->
		<div
			on:click={() => copy(lightningAddress)}
			id="qr"
			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative mx-auto"
		/>

		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex justify-between items-center">
			<span class="mx-auto">{lightningAddress}</span>
			<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
				<Icon icon="copy" style="ml-2" />
			</button>
		</div>
		<p class="text-center">
			This is a re-usable <a href="https://lightningaddress.com/" class="underline" target="_blank"
				>lightning address</a
			>
		</p>
	</div>
</div>