github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-11 00:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Onboarding

Browse Source
This commit is contained in:
Wanjohi
2024-09-16 21:10:33 +03:00
parent 58e93b28e9
commit f2f3386bdb
8 changed files with 462 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/src/routes/(onboarding)/new/[id]/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { component$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
export default component$(() => {
const location = useLocation()
return (
<div>{location.params.id}</div>
)
})

217
apps/www/src/routes/(onboarding)/new/index.tsx Normal file
View File

@@ -0,0 +1,217 @@
import { auth } from "@nestri/ui";
import { Button } from "@nestri/ui/react"
import { buttonVariants } from "@nestri/ui/design";
// import { type Provider } from "@supabase/supabase-js";
import { Link, useLocation } from "@builder.io/qwik-city";
import { $, component$, useSignal } from "@builder.io/qwik";
type AuthFlowProps = {
flow: string
}
const flow: any = "join"
export default component$(() => {
const isLoading = useSignal(false);
const isGHLoading = useSignal(false);
const setIsLoading = $((v: boolean) => isLoading.value = v)
const setIsGHLoading = $((v: boolean) => isGHLoading.value = v)
const location = useLocation();
// const authenticateUser = $(async (provider: any) => {
// await auth.openWindow(`${location.url.origin}/api/auth/${provider}`)
// })
return (
<>
<div class='h-screen w-full flex overflow-hidden justify-center items-center' >
<div
style={{ animationDelay: "0.05s", animationFillMode: "forwards" }}
class='animate-fade-up flex flex-col px-5 max-[479px]:px-6 max-w-[380px] gap-2 w-full' >
{/* <img src="/logo.webp" alt="Nestri Logo" height={80} width={80} draggable={false} class="w-[70px] md:w-[80px] aspect-[90/69]" /> */}
<h1 class='font-semibold text-2xl font-title leading-6' >
{flow == "login" ? "Login" : "Join"}
</h1>
{flow == "join" ? (
<p class='max-w-[400px] font-normal text-sm dark:text-primary-50/70 text-primary-950/70'>
Already have an account?
<Link
href="/login"
class={buttonVariants.link()}
>Login
</Link>
</p>
) : (
<p class='max-w-[400px] font-normal text-sm dark:text-primary-50/70 text-primary-950/70'>
Don't have an account yet?
<Link
href="/join"
class={buttonVariants.link()}
>Join
</Link>
</p>
)}
<hr class='my-2 border-none h-0.5 bg-primary-950/60 dark:bg-primary-50/60' />
{/* <Button.Root
disabled={isGHLoading.value || isLoading.value}
isLoading={isLoading.value}
setIsLoading={setIsLoading}
loadingTime={2000}
client:load
intent="primary"
// onClick$={async () => await authenticateUser("discord")}
size="md"
class="w-full gap-4 from-[#5865F2] to-[#4445e7] [--btn-border-color:#3836cc] dark:border-[#8093f9]/75">
<Button.Icon
isLoading={isLoading.value}
client:load>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0a12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055a20.03 20.03 0 0 0 5.993 2.98a.078.078 0 0 0 .084-.026a13.83 13.83 0 0 0 1.226-1.963a.074.074 0 0 0-.041-.104a13.201 13.201 0 0 1-1.872-.878a.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028a19.963 19.963 0 0 0 6.002-2.981a.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028M8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38c0-1.312.956-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.956 2.38-2.157 2.38m7.975 0c-1.183 0-2.157-1.069-2.157-2.38c0-1.312.955-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.946 2.38-2.157 2.38" />
</svg>
</Button.Icon>
<Button.Label
isLoading={isLoading.value}>
Continue with Discord
</Button.Label>
</Button.Root> */}
<Button.Root
disabled={isLoading.value || isGHLoading.value}
isLoading={isLoading.value}
setIsLoading={setIsLoading}
client:load
loadingTime={5000}
// onClick$={handleSteamLogin}
intent="primary"
size="md"
class="w-full gap-4 from-[#2a475e] to-[#2a475e]/80 [--btn-border-color:#1b2838] dark:border-[#1b2838]/75">
<Button.Icon
isLoading={isLoading.value}
client:load>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006l4.304 1.769A2.2 2.2 0 0 1 5.62 8.88l1.96-2.844l-.001-.04a3.046 3.046 0 0 1 3.042-3.043a3.046 3.046 0 0 1 3.042 3.043a3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11a2.22 2.22 0 0 1-1.312-1.568L.33 10.333Z" /><path d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165a1.7 1.7 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029a2.03 2.03 0 0 0 2.027-2.029a2.03 2.03 0 0 0-2.027-2.027a2.03 2.03 0 0 0-2.027 2.027m2.03-1.527a1.524 1.524 0 1 1-.002 3.048a1.524 1.524 0 0 1 .002-3.048" />
</g>
</svg>
</Button.Icon>
<Button.Label
loadingText="Linking Steam account..."
class="text-ellipsis whitespace-nowrap"
isLoading={isLoading.value}>
Link your Steam account
</Button.Label>
<div class="w-[8%]" />
</Button.Root>
<Button.Root
// disabled={isGHLoading.value || isLoading.value}
disabled
isLoading={isGHLoading.value}
setIsLoading={setIsGHLoading}
client:load
// loadingTime={2000}
intent="primary"
size="md"
class="w-full gap-4 mt-2 from-[#434D56] to-[#24292e] [--btn-border-color:#1B1F22] dark:border-[#63707E]/75">
<Button.Icon
isLoading={isGHLoading.value}
client:load>
<svg xmlns="http://www.w3.org/2000/svg" class="fill-gray-500" width="24" height="24" viewBox="0 0 815 815">
<path d="M375.46 252.45v-75.97c0-12.08-5.58-17.69-17.18-17.69h-18.9v111.36h18.9c11.6 0 17.18-5.61 17.18-17.7zm-60.68 270.86l-10.32 25.99h20.51zM685.37 13.5H129.63c-45.04 0-61.67 16.62-61.67 61.69v543.78c0 5.1.21 9.84.66 14.23 1.03 9.84 1.22 19.37 10.37 30.22.89 1.06 10.23 8.01 10.23 8.01 5.02 2.46 8.46 4.28 14.12 6.56l273.65 114.65c14.21 6.51 20.15 9.05 30.46 8.85h0 .04.04 0c10.32.2 16.26-2.33 30.47-8.85l273.65-114.65c5.67-2.28 9.1-4.09 14.12-6.56 0 0 9.34-6.95 10.23-8.01 9.15-10.85 9.34-20.39 10.37-30.22.45-4.39.66-9.13.66-14.23V75.19c.01-45.07-16.62-61.69-61.66-61.69zM442.15 118.22h45.97v302.13h-45.97V118.22zm3.11 375.7h26.77v91.42h-25.21v-52.5l-23.38 35.79h-.52l-23.25-35.52v52.24h-24.82v-91.42h26.77l21.81 35.39 21.83-35.4zm-151.84-375.7h72.16c37.37 0 55.84 18.56 55.84 56.11v80.28c0 37.55-18.47 56.1-55.84 56.1h-26.2v109.63h-45.96V118.22zm-125.27 0h102.23v41.86H214.1v85.46h54.12v41.86H214.1v91.08h57.13v41.86H168.15V118.22zm87.86 454.85c-9.67 7.97-23.12 14.11-39.7 14.11-28.47 0-49.76-19.59-49.76-47.28v-.26c0-26.64 20.9-47.54 49.24-47.54 16.06 0 27.43 4.96 37.09 13.32l-14.89 17.89c-6.53-5.49-13.06-8.62-22.07-8.62-13.19 0-23.38 11.1-23.38 25.08v.26c0 14.76 10.32 25.34 24.82 25.34 6.14 0 10.84-1.31 14.63-3.79v-11.1h-18.02v-18.55h42.06v41.14zm46.76-79.8h24.42l38.92 92.08h-27.17l-6.66-16.33h-35.26l-6.53 16.33h-26.64l38.92-92.08zm102.61 244.55l-128.81-44.28h263.1l-134.29 44.28zm157.56-152.47h-74.18v-91.42h73.53v21.55h-48.46v13.84h43.88v19.98h-43.88v14.5h49.11v21.55zm-50.53-218.52V171.74c0-37.56 18.48-56.11 55.84-56.11h22.34c37.36 0 55.4 18.13 55.4 55.68v61.73h-45.1V173.9c0-12.09-5.59-17.69-17.18-17.69h-7.73c-12.03 0-17.61 5.61-17.61 17.69v190.78c0 12.09 5.59 17.69 17.61 17.69h8.6c11.59 0 17.18-5.61 17.18-17.69v-68.2h45.1v70.35c0 37.56-18.47 56.11-55.84 56.11h-22.77c-37.37 0-55.84-18.56-55.84-56.11zm136.86 190.3c0 18.68-14.76 29.78-36.96 29.78-16.19 0-31.61-5.09-42.84-15.15l14.11-16.85c9.01 7.18 19.07 10.97 29.65 10.97 6.79 0 10.45-2.35 10.45-6.27v-.26c0-3.79-3-5.88-15.41-8.75-19.46-4.44-34.48-9.93-34.48-28.73v-.26c0-16.98 13.45-29.26 35.39-29.26 15.54 0 27.69 4.18 37.61 12.15l-12.67 17.89c-8.36-5.88-17.5-9.01-25.6-9.01-6.14 0-9.14 2.61-9.14 5.88v.26c0 4.18 3.14 6.01 15.8 8.88 21.03 4.57 34.09 11.36 34.09 28.47v.26z" />
</svg>
</Button.Icon>
<Button.Label
class="text-ellipsis whitespace-nowrap"
isLoading={isGHLoading.value}>
Link your Epic Games account
</Button.Label>
</Button.Root>
<Button.Root
// disabled={isGHLoading.value || isLoading.value}
disabled
isLoading={isGHLoading.value}
setIsLoading={setIsGHLoading}
client:load
// loadingTime={2000}
intent="primary"
size="md"
class="w-full gap-4 mt-2 from-[rgb(110,29,114)] to-[rgb(164,41,171)] [--btn-border-color:rgb(110,29,114)] dark:border-[#63707E]/75">
<Button.Icon
isLoading={isGHLoading.value}
client:load>
<svg xmlns="http://www.w3.org/2000/svg" class="text-gray-500" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 57 69" version="1.1">
<defs>
<polygon id="path-1" points="0 0.012 56.539 0.012 56.539 53.814 0 53.814" />
<polygon id="path-3" points="0 0.6554 7.1358 0.6554 7.1358 9 0 9" />
<polygon id="path-5" points="0.3397 0.6554 7.4757 0.6554 7.4757 9 0.3397 9" />
<polygon id="path-7" points="0.0474 0.7472 8.539 0.7472 8.539 8.9082 0.0474 8.9082" />
</defs>
<g id="LOGO-/-GOG.COM-/-VERTICAL" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(0.000000, -0.011500)">
<mask id="mask-2" fill="currentColor">
<use xlink:href="#path-1" />
</mask>
<g id="Clip-2" />
<path d="M50.335,25.837 C50.335,27.203 49.231,28.3 47.874,28.3 L37.316,28.3 L37.316,25.128 L46.212,25.128 L46.218,25.128 C46.743,25.128 47.165,24.7 47.165,24.178 L47.165,24.172 L47.165,13.698 L47.165,13.69 C47.165,13.167 46.743,12.743 46.218,12.743 L46.212,12.743 L41.444,12.743 L41.435,12.743 C40.917,12.743 40.494,13.167 40.494,13.69 L40.494,13.698 L40.494,18.457 L40.494,18.463 C40.494,18.987 40.917,19.412 41.435,19.412 L41.444,19.412 L45.254,19.412 L45.254,22.585 L39.78,22.585 C38.418,22.585 37.316,21.485 37.316,20.125 L37.316,12.03 C37.316,10.67 38.418,9.568 39.78,9.568 L47.874,9.568 C49.231,9.568 50.335,10.67 50.335,12.03 L50.335,25.837 Z M50.326,44.25 L47.198,44.25 L47.198,34.552 L45.011,34.552 L45,34.552 C44.482,34.552 44.069,34.97 44.069,35.486 L44.069,35.492 L44.069,44.25 L40.94,44.25 L40.94,34.552 L38.749,34.552 L38.742,34.552 C38.225,34.552 37.811,34.97 37.811,35.486 L37.811,35.492 L37.811,44.258 L34.684,44.258 L34.684,33.845 C34.684,32.512 35.767,31.426 37.109,31.426 L50.326,31.426 L50.326,44.25 Z M32.318,22.585 L24.22,22.585 C22.86,22.585 21.761,21.485 21.761,20.125 L21.761,12.03 C21.761,10.67 22.86,9.568 24.22,9.568 L32.318,9.568 C33.675,9.568 34.778,10.67 34.778,12.03 L34.778,20.125 C34.778,21.485 33.675,22.585 32.318,22.585 Z M32.178,41.824 C32.178,43.164 31.092,44.25 29.754,44.25 L21.777,44.25 C20.435,44.25 19.351,43.164 19.351,41.824 L19.351,33.845 C19.351,32.512 20.435,31.426 21.777,31.426 L29.754,31.426 C31.092,31.426 32.178,32.512 32.178,33.845 L32.178,41.824 Z M19.221,25.837 C19.221,27.203 18.118,28.3 16.759,28.3 L6.203,28.3 L6.203,25.128 L15.093,25.128 L15.103,25.128 C15.627,25.128 16.047,24.7 16.047,24.178 L16.047,24.172 L16.047,13.698 L16.047,13.69 C16.047,13.167 15.627,12.743 15.103,12.743 L15.093,12.743 L10.33,12.743 L10.319,12.743 C9.796,12.743 9.376,13.167 9.376,13.69 L9.376,13.698 L9.376,18.457 L9.376,18.463 C9.376,18.987 9.796,19.412 10.319,19.412 L10.33,19.412 L14.141,19.412 L14.141,22.585 L8.664,22.585 C7.302,22.585 6.203,21.485 6.203,20.125 L6.203,12.03 C6.203,10.67 7.302,9.568 8.664,9.568 L16.759,9.568 C18.118,9.568 19.221,10.67 19.221,12.03 L19.221,25.837 Z M16.847,34.552 L10.28,34.552 L10.27,34.552 C9.754,34.552 9.34,34.97 9.34,35.486 C9.34,35.486 9.342,35.486 9.342,35.492 L9.34,35.492 L9.34,40.186 L9.342,40.186 L9.34,40.19 C9.34,40.704 9.754,41.126 10.27,41.126 L10.28,41.126 L10.96,41.126 L16.847,41.126 L16.847,44.258 L8.64,44.258 L8.64,44.25 C7.296,44.25 6.21,43.164 6.21,41.824 L6.21,33.845 C6.21,32.512 7.296,31.426 8.64,31.426 L16.847,31.426 L16.847,34.552 Z M52.951,0.011 L3.587,0.011 C1.606,0.011 0,1.617 0,3.597 L0,50.228 C0,52.208 1.606,53.814 3.587,53.814 L52.951,53.814 C54.933,53.814 56.539,52.208 56.539,50.228 L56.539,3.597 C56.539,1.617 54.933,0.011 52.951,0.011 Z" id="Fill-1" fill="currentColor" mask="url(#mask-2)" />
</g>
<path d="M30.6612,12.7318 C31.1862,12.7318 31.5972,13.1558 31.5972,13.6788 L31.5972,13.6868 L31.5972,18.4458 L31.5972,18.4518 C31.5972,18.9758 31.1862,19.4008 30.6612,19.4008 L30.6502,19.4008 L25.8872,19.4008 L25.8802,19.4008 C25.3552,19.4008 24.9342,18.9758 24.9342,18.4518 L24.9342,18.4458 L24.9342,13.6868 L24.9342,13.6788 C24.9342,13.1558 25.3552,12.7318 25.8802,12.7318 L25.8872,12.7318 L30.6502,12.7318 L30.6612,12.7318" id="Fill-4" fill="currentColor" />
<path d="M28.1226,34.5404 C28.6366,34.5404 29.0506,34.9584 29.0506,35.4754 L29.0506,35.4804 L29.0506,40.1744 C29.0506,40.6894 28.6366,41.1104 28.1226,41.1104 C28.1176,41.1104 28.1166,41.1054 28.1116,41.1054 L28.1116,41.1104 L23.4196,41.1104 L23.4196,41.1054 C23.4196,41.1054 23.4146,41.1104 23.4096,41.1104 C22.8936,41.1104 22.4796,40.6894 22.4796,40.1744 L22.4796,35.4804 L22.4796,35.4754 C22.4796,34.9584 22.8936,34.5404 23.4096,34.5404 L23.4196,34.5404 L28.1116,34.5404 L28.1226,34.5404" id="Fill-6" fill="currentColor" />
<g id="Group-10" transform="translate(0.000000, 59.988500)">
<mask id="mask-4" fill="currentColor">
<use xlink:href="#path-3" />
</mask>
<g id="Clip-9" />
<path d="M5.8238,8.7804 C5.3588,8.9264 4.8488,9.0004 4.2948,9.0004 C3.6368,9.0004 3.0448,8.8984 2.5178,8.6944 C1.9898,8.4914 1.5388,8.2074 1.1648,7.8414 C0.7908,7.4734 0.5028,7.0354 0.3018,6.5224 C0.1008,6.0094 -0.0002,5.4454 -0.0002,4.8314 C-0.0002,4.2084 0.0968,3.6404 0.2938,3.1284 C0.4888,2.6144 0.7668,2.1764 1.1278,1.8084 C1.4888,1.4424 1.9268,1.1594 2.4438,0.9584 C2.9598,0.7564 3.5368,0.6554 4.1748,0.6554 C4.4978,0.6554 4.7978,0.6794 5.0748,0.7264 C5.3518,0.7744 5.6088,0.8424 5.8438,0.9314 C6.0788,1.0214 6.2978,1.1304 6.4988,1.2564 C6.6998,1.3844 6.8878,1.5274 7.0628,1.6864 L6.7488,2.1874 C6.6998,2.2634 6.6358,2.3124 6.5578,2.3334 C6.4808,2.3544 6.3938,2.3364 6.2988,2.2794 C6.2078,2.2254 6.1038,2.1614 5.9858,2.0854 C5.8678,2.0094 5.7248,1.9364 5.5558,1.8664 C5.3868,1.7964 5.1878,1.7354 4.9578,1.6864 C4.7278,1.6364 4.4558,1.6134 4.1408,1.6134 C3.6808,1.6134 3.2658,1.6874 2.8928,1.8374 C2.5208,1.9874 2.2038,2.2014 1.9418,2.4804 C1.6798,2.7594 1.4788,3.0974 1.3378,3.4944 C1.1978,3.8914 1.1278,4.3364 1.1278,4.8314 C1.1278,5.3424 1.2008,5.8014 1.3468,6.2064 C1.4928,6.6094 1.7018,6.9544 1.9738,7.2364 C2.2448,7.5204 2.5738,7.7354 2.9618,7.8844 C3.3488,8.0314 3.7828,8.1054 4.2658,8.1054 C4.4558,8.1054 4.6338,8.0934 4.7988,8.0714 C4.9638,8.0494 5.1218,8.0174 5.2738,7.9774 C5.4258,7.9364 5.5728,7.8874 5.7128,7.8294 C5.8528,7.7704 5.9958,7.7034 6.1398,7.6274 L6.1398,5.8274 L4.8698,5.8274 C4.7978,5.8274 4.7398,5.8054 4.6968,5.7644 C4.6528,5.7224 4.6308,5.6724 4.6308,5.6104 L4.6308,4.9844 L7.1358,4.9844 L7.1358,8.1174 C6.7268,8.4134 6.2888,8.6344 5.8238,8.7804" id="Fill-8" fill="currentColor" mask="url(#mask-4)" />
</g>
<path d="M15.6856,64.8197 C15.6856,64.3177 15.6176,63.8677 15.4806,63.4687 C15.3446,63.0707 15.1506,62.7337 14.8996,62.4587 C14.6486,62.1827 14.3456,61.9707 13.9886,61.8237 C13.6316,61.6747 13.2326,61.6017 12.7926,61.6017 C12.3556,61.6017 11.9586,61.6747 11.6026,61.8237 C11.2456,61.9707 10.9406,62.1827 10.6876,62.4587 C10.4356,62.7337 10.2406,63.0707 10.1036,63.4687 C9.9676,63.8677 9.8986,64.3177 9.8986,64.8197 C9.8986,65.3207 9.9676,65.7697 10.1036,66.1667 C10.2406,66.5627 10.4356,66.8987 10.6876,67.1737 C10.9406,67.4497 11.2456,67.6607 11.6026,67.8057 C11.9586,67.9527 12.3556,68.0257 12.7926,68.0257 C13.2326,68.0257 13.6316,67.9527 13.9886,67.8057 C14.3456,67.6607 14.6486,67.4497 14.8996,67.1737 C15.1506,66.8987 15.3446,66.5627 15.4806,66.1667 C15.6176,65.7697 15.6856,65.3207 15.6856,64.8197 M16.8186,64.8197 C16.8186,65.4297 16.7226,65.9917 16.5286,66.5027 C16.3356,67.0117 16.0616,67.4527 15.7086,67.8197 C15.3556,68.1887 14.9316,68.4747 14.4356,68.6777 C13.9406,68.8817 13.3926,68.9827 12.7926,68.9827 C12.1926,68.9827 11.6456,68.8817 11.1516,68.6777 C10.6586,68.4747 10.2356,68.1887 9.8816,67.8197 C9.5286,67.4527 9.2556,67.0117 9.0616,66.5027 C8.8686,65.9917 8.7716,65.4297 8.7716,64.8197 C8.7716,64.2077 8.8686,63.6467 9.0616,63.1347 C9.2556,62.6257 9.5286,62.1847 9.8816,61.8147 C10.2356,61.4447 10.6586,61.1567 11.1516,60.9517 C11.6456,60.7467 12.1926,60.6437 12.7926,60.6437 C13.3926,60.6437 13.9406,60.7467 14.4356,60.9517 C14.9316,61.1567 15.3556,61.4447 15.7086,61.8147 C16.0616,62.1847 16.3356,62.6257 16.5286,63.1347 C16.7226,63.6467 16.8186,64.2077 16.8186,64.8197" id="Fill-11" fill="currentColor" />
<g id="Group-15" transform="translate(18.000000, 59.988500)">
<mask id="mask-6" fill="currentColor">
<use xlink:href="#path-5" />
</mask>
<g id="Clip-14" />
<path d="M6.1637,8.7804 C5.6987,8.9264 5.1887,9.0004 4.6337,9.0004 C3.9767,9.0004 3.3847,8.8984 2.8567,8.6944 C2.3297,8.4914 1.8777,8.2074 1.5047,7.8414 C1.1307,7.4734 0.8427,7.0354 0.6417,6.5224 C0.4397,6.0094 0.3397,5.4454 0.3397,4.8314 C0.3397,4.2084 0.4367,3.6404 0.6327,3.1284 C0.8287,2.6144 1.1067,2.1764 1.4677,1.8084 C1.8277,1.4424 2.2667,1.1594 2.7827,0.9584 C3.2997,0.7564 3.8767,0.6554 4.5147,0.6554 C4.8377,0.6554 5.1377,0.6794 5.4147,0.7264 C5.6917,0.7744 5.9477,0.8424 6.1837,0.9314 C6.4187,1.0214 6.6377,1.1304 6.8377,1.2564 C7.0397,1.3844 7.2267,1.5274 7.4017,1.6864 L7.0887,2.1874 C7.0397,2.2634 6.9757,2.3124 6.8977,2.3334 C6.8197,2.3544 6.7337,2.3364 6.6387,2.2794 C6.5477,2.2254 6.4437,2.1614 6.3257,2.0854 C6.2077,2.0094 6.0647,1.9364 5.8957,1.8664 C5.7267,1.7964 5.5267,1.7354 5.2977,1.6864 C5.0677,1.6364 4.7947,1.6134 4.4797,1.6134 C4.0207,1.6134 3.6047,1.6874 3.2327,1.8374 C2.8607,1.9874 2.5437,2.2014 2.2817,2.4804 C2.0197,2.7594 1.8187,3.0974 1.6777,3.4944 C1.5377,3.8914 1.4677,4.3364 1.4677,4.8314 C1.4677,5.3424 1.5397,5.8014 1.6857,6.2064 C1.8327,6.6094 2.0417,6.9544 2.3127,7.2364 C2.5847,7.5204 2.9137,7.7354 3.3017,7.8844 C3.6887,8.0314 4.1227,8.1054 4.6057,8.1054 C4.7947,8.1054 4.9727,8.0934 5.1387,8.0714 C5.3037,8.0494 5.4617,8.0174 5.6137,7.9774 C5.7657,7.9364 5.9117,7.8874 6.0527,7.8294 C6.1927,7.7704 6.3347,7.7034 6.4797,7.6274 L6.4797,5.8274 L5.2087,5.8274 C5.1377,5.8274 5.0797,5.8054 5.0357,5.7644 C4.9927,5.7224 4.9697,5.6724 4.9697,5.6104 L4.9697,4.9844 L7.4757,4.9844 L7.4757,8.1174 C7.0657,8.4134 6.6287,8.6344 6.1637,8.7804" id="Fill-13" fill="currentColor" mask="url(#mask-6)" />
</g>
<path d="M27.3995,68.2699 C27.3995,68.1719 27.4175,68.0799 27.4535,67.9919 C27.4895,67.9049 27.5385,67.8289 27.6015,67.7639 C27.6645,67.6999 27.7385,67.6489 27.8265,67.6099 C27.9135,67.5719 28.0065,67.5529 28.1055,67.5529 C28.2045,67.5529 28.2965,67.5719 28.3845,67.6099 C28.4715,67.6489 28.5475,67.6999 28.6125,67.7639 C28.6765,67.8289 28.7285,67.9049 28.7665,67.9919 C28.8035,68.0799 28.8225,68.1719 28.8225,68.2699 C28.8225,68.3729 28.8035,68.4669 28.7665,68.5519 C28.7285,68.6379 28.6765,68.7129 28.6125,68.7779 C28.5475,68.8419 28.4715,68.8919 28.3845,68.9279 C28.2965,68.9639 28.2045,68.9829 28.1055,68.9829 C28.0065,68.9829 27.9135,68.9639 27.8265,68.9279 C27.7385,68.8919 27.6645,68.8419 27.6015,68.7779 C27.5385,68.7129 27.4895,68.6379 27.4535,68.5519 C27.4175,68.4669 27.3995,68.3729 27.3995,68.2699" id="Fill-16" fill="currentColor" />
<path d="M36.4151,67.2113 C36.4771,67.2113 36.5291,67.2353 36.5741,67.2853 L37.0131,67.7583 C36.6791,68.1463 36.2731,68.4463 35.7971,68.6643 C35.3211,68.8803 34.7451,68.9883 34.0681,68.9883 C33.4831,68.9883 32.9521,68.8873 32.4741,68.6833 C31.9951,68.4803 31.5871,68.1953 31.2501,67.8293 C30.9111,67.4623 30.6491,67.0243 30.4641,66.5113 C30.2771,65.9973 30.1851,65.4343 30.1851,64.8193 C30.1851,64.2033 30.2811,63.6403 30.4751,63.1273 C30.6681,62.6153 30.9401,62.1743 31.2921,61.8063 C31.6441,61.4383 32.0631,61.1523 32.5541,60.9483 C33.0431,60.7453 33.5841,60.6443 34.1771,60.6443 C34.7581,60.6443 35.2701,60.7373 35.7151,60.9233 C36.1581,61.1083 36.5501,61.3613 36.8881,61.6813 L36.5231,62.1873 C36.5011,62.2253 36.4711,62.2563 36.4351,62.2813 C36.3981,62.3073 36.3511,62.3183 36.2901,62.3183 C36.2221,62.3183 36.1381,62.2813 36.0391,62.2073 C35.9401,62.1343 35.8111,62.0503 35.6511,61.9603 C35.4921,61.8683 35.2931,61.7863 35.0541,61.7123 C34.8151,61.6383 34.5201,61.6023 34.1711,61.6023 C33.7501,61.6023 33.3641,61.6743 33.0161,61.8203 C32.6661,61.9663 32.3641,62.1783 32.1121,62.4553 C31.8591,62.7323 31.6631,63.0703 31.5221,63.4693 C31.3821,63.8673 31.3111,64.3173 31.3111,64.8193 C31.3111,65.3273 31.3851,65.7813 31.5311,66.1813 C31.6781,66.5793 31.8771,66.9163 32.1291,67.1903 C32.3821,67.4663 32.6801,67.6763 33.0231,67.8193 C33.3671,67.9653 33.7381,68.0373 34.1371,68.0373 C34.3801,68.0373 34.5991,68.0233 34.7951,67.9933 C34.9901,67.9663 35.1711,67.9213 35.3361,67.8603 C35.5011,67.8003 35.6551,67.7233 35.7971,67.6303 C35.9391,67.5363 36.0811,67.4253 36.2221,67.2963 C36.2861,67.2393 36.3511,67.2113 36.4151,67.2113" id="Fill-18" fill="currentColor" />
<path d="M44.921,64.8197 C44.921,64.3177 44.853,63.8677 44.716,63.4687 C44.579,63.0707 44.386,62.7337 44.135,62.4587 C43.885,62.1827 43.581,61.9707 43.224,61.8237 C42.866,61.6747 42.469,61.6017 42.027,61.6017 C41.591,61.6017 41.194,61.6747 40.837,61.8237 C40.481,61.9707 40.176,62.1827 39.923,62.4587 C39.671,62.7337 39.476,63.0707 39.339,63.4687 C39.203,63.8677 39.135,64.3177 39.135,64.8197 C39.135,65.3207 39.203,65.7697 39.339,66.1667 C39.476,66.5627 39.671,66.8987 39.923,67.1737 C40.176,67.4497 40.481,67.6607 40.837,67.8057 C41.194,67.9527 41.591,68.0257 42.027,68.0257 C42.469,68.0257 42.866,67.9527 43.224,67.8057 C43.581,67.6607 43.885,67.4497 44.135,67.1737 C44.386,66.8987 44.579,66.5627 44.716,66.1667 C44.853,65.7697 44.921,65.3207 44.921,64.8197 M46.055,64.8197 C46.055,65.4297 45.958,65.9917 45.764,66.5027 C45.57,67.0117 45.297,67.4527 44.943,67.8197 C44.591,68.1887 44.167,68.4747 43.671,68.6777 C43.176,68.8817 42.628,68.9827 42.027,68.9827 C41.428,68.9827 40.881,68.8817 40.387,68.6777 C39.894,68.4747 39.471,68.1887 39.117,67.8197 C38.765,67.4527 38.491,67.0117 38.297,66.5027 C38.104,65.9917 38.007,65.4297 38.007,64.8197 C38.007,64.2077 38.104,63.6467 38.297,63.1347 C38.491,62.6257 38.765,62.1847 39.117,61.8147 C39.471,61.4447 39.894,61.1567 40.387,60.9517 C40.881,60.7467 41.428,60.6437 42.027,60.6437 C42.628,60.6437 43.176,60.7467 43.671,60.9517 C44.167,61.1567 44.591,61.4447 44.943,61.8147 C45.297,62.1847 45.57,62.6257 45.764,63.1347 C45.958,63.6467 46.055,64.2077 46.055,64.8197" id="Fill-20" fill="currentColor" />
<g id="Group-24" transform="translate(48.000000, 59.988500)">
<mask id="mask-8" fill="currentColor">
<use xlink:href="#path-7" />
</mask>
<g id="Clip-23" />
<path d="M4.1934,6.2462 C4.2344,6.3472 4.2764,6.4462 4.3184,6.5452 C4.3564,6.4422 4.3964,6.3412 4.4374,6.2402 C4.4794,6.1402 4.5254,6.0432 4.5744,5.9532 L7.3424,0.9342 C7.3884,0.8482 7.4384,0.7942 7.4934,0.7752 C7.5484,0.7562 7.6254,0.7472 7.7244,0.7472 L8.5394,0.7472 L8.5394,8.9082 L7.5704,8.9082 L7.5704,2.9112 C7.5704,2.8312 7.5724,2.7462 7.5764,2.6542 C7.5804,2.5632 7.5864,2.4712 7.5934,2.3752 L4.7974,7.4782 C4.7104,7.6492 4.5764,7.7352 4.3984,7.7352 L4.2384,7.7352 C4.0594,7.7352 3.9264,7.6492 3.8394,7.4782 L0.9804,2.3582 C0.9924,2.4582 1.0004,2.5542 1.0064,2.6482 C1.0114,2.7442 1.0144,2.8312 1.0144,2.9112 L1.0144,8.9082 L0.0474,8.9082 L0.0474,0.7472 L0.8604,0.7472 C0.9604,0.7472 1.0354,0.7562 1.0894,0.7752 C1.1414,0.7942 1.1934,0.8482 1.2424,0.9342 L4.0624,5.9582 C4.1074,6.0492 4.1514,6.1442 4.1934,6.2462" id="Fill-22" fill="currentColor" mask="url(#mask-8)" />
</g>
</g>
</svg>
</Button.Icon>
<Button.Label
class="text-ellipsis whitespace-nowrap"
isLoading={isGHLoading.value}>
Link your GOG.com account
</Button.Label>
<div class="w-[2%]" />
</Button.Root>
{flow == "join" ? (
<p class='max-w-[400px] pt-4 text-center font-normal text-sm dark:text-primary-50/70 text-primary-950/70'>
By creating an account, you agree to our <br />
<Link
href="/terms"
class={buttonVariants.link()}
>Terms of Service
</Link> and <Link
href="/privacy"
class={buttonVariants.link()}
>Privacy Policy
</Link>
</p>
) : (
<div class="h-14" />
)}
</div>
</div>
</>
)
})

2
packages/ui/src/design/utils.ts
View File

@@ -1,5 +1,5 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import { type ClassValue, clsx } from "clsx"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))

5
packages/ui/src/index.ts
View File

@@ -4,10 +4,11 @@ export * from "./fonts"
export * from "./input"
export * from "./home-nav-bar"
export * from "./game-card"
export * from "./team-counter"
export * from "./tooltip"
export * from "./footer"
export * from "./router-head"
export * from "./card"
export * from "./router-head"
export * from "./team-counter"
export * as auth from "./popup"
export * as Modal from "./modal"
export { default as Portal } from "./portal"

67
packages/ui/src/popup.ts Normal file
View File

@@ -0,0 +1,67 @@
export const openWindow = (url: string): Promise<void> => {
return new Promise((resolve) => {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
// Open in a new tab for mobile devices
const newTab = window.open(url, '_blank');
localStorage.removeItem("auth_success")
if (newTab) {
const pollTimer = setInterval(() => {
if (newTab.closed) {
clearInterval(pollTimer);
resolve();
return;
} else if (localStorage.getItem("auth_success")) {
clearInterval(pollTimer);
newTab.location.href = 'about:blank';
setTimeout(() => {
newTab.close();
window.focus();
//TODO: Navigate and start onboarding
}, 50);
localStorage.removeItem("auth_success")
resolve();
return;
}
}, 300);
} else {
resolve(); // Resolve if popup couldn't be opened
}
} else {
// Open in a popup for desktop devices
const width = 600;
const height = 600;
const top = window.top!.outerHeight / 2 + window.top!.screenY - (height / 2);
const left = window.top!.outerWidth / 2 + window.top!.screenX - (width / 2);
const popup = window.open(
url,
'Nestri Auth Popup',
`width=${width},height=${height},left=${left},top=${top},toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,`
);
if (popup) {
const pollTimer = setInterval(() => {
if (popup.closed) {
clearInterval(pollTimer);
localStorage.removeItem("auth_success")
resolve();
return;
}
}, 300);
} else {
resolve(); // Resolve if popup couldn't be opened
}
}
});
};

147
packages/ui/src/react/button.tsx Normal file
View File

@@ -0,0 +1,147 @@
/** @jsxImportSource react */
import * as React from "react"
import { motion } from "framer-motion"
import { qwikify$ } from "@builder.io/qwik-react";
import { cn, buttonIcon, buttonVariants, type ButtonVariantProps, type ButtonVariantIconProps } from "@nestri/ui/design";
import {cloneElement,} from "./utils"
export interface ButtonRootProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, ButtonVariantProps {
class?: string;
children?: React.ReactElement;
onClick?: () => void | Promise<void>;
setIsLoading?: (v: boolean) => void;
isLoading: boolean;
disabled?: boolean;
loadingTime?: number;
href?: string;
}
export interface ButtonIconProps extends React.HTMLAttributes<HTMLElement>, ButtonVariantIconProps {
isLoading: boolean;
height?: number;
width?: number;
class?:string;
}
export interface ButtonLabelProps extends React.HTMLAttributes<HTMLElement>, ButtonVariantIconProps {
loadingText?: string;
class?: string;
isLoading: boolean;
}
export const Icon: React.FC<ButtonIconProps> = (({
class:className,
children,
size = "md",
isLoading,
type = "leading",
height = 20,
width = 20,
}) => {
if (isLoading) {
return (
<motion.svg
height={height}
width={width}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
// className="h-4 w-4 fill-white"
fill="currentColor"
animate={{ rotate: 1080 }}
transition={{
repeat: 1 / 0,
duration: 1,
ease: [.1, .21, .355, .68],
repeatType: "loop"
}}
className={buttonIcon({ size, type, className })}
>
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"></path>
</motion.svg>
)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
} else if (!isLoading && children) {
return cloneElement(children as React.ReactElement, buttonIcon({ size, type, className }))
}
})
export const Label = React.forwardRef<HTMLElement, ButtonLabelProps>(({
class:className,
children,
loadingText,
isLoading,
...props
}, forwardedRef) => {
return (
<span className={className} {...props} ref={forwardedRef}>{isLoading && loadingText ? loadingText : children}</span>
)
})
const Root = React.forwardRef<HTMLButtonElement & HTMLAnchorElement, ButtonRootProps>(({
class: className,
href,
disabled = false,
loadingTime,
intent = "primary",
variant = "solid",
size = "md",
isLoading,
setIsLoading,
onClick,
children,
...props }, forwardedRef) => {
const handleClick = async () => {
if (setIsLoading) {
if (!isLoading && !disabled) {
setIsLoading(true);
if (onClick) {
await onClick();
} else {
// Simulate an async operation
await new Promise(resolve => setTimeout(resolve, loadingTime));
}
setIsLoading(false);
}
}
};
const Component = href ? 'a' : 'button';
const iconOnly = React.Children.toArray(children).some(child =>
React.isValidElement(child) && child.type === Icon && child.props.type === 'only'
);
const buttonSize = iconOnly ? 'iconOnlyButtonSize' : 'size';
return (
<Component
ref={forwardedRef}
onClick={handleClick}
disabled={isLoading || disabled}
className={cn(buttonVariants[variant as keyof typeof buttonVariants]({ intent, [buttonSize]: size, className }))}
{...props}
>
{children}
</Component>
)
})
export type ButtonRoot = typeof Root;
export type ButtonIcon = typeof Icon;
export type ButtonLabel = typeof Label;
Root.displayName = 'Root';
Icon.displayName = "Icon";
Label.displayName = "Label";
export const Button = {
Root: qwikify$(Root),
Icon: qwikify$(Icon),
Label: qwikify$(Label)
}
//The ✔️ SVG is here:
{/* <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 shrink-0 fill-white"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM17.2071 9.70711C17.5976 9.31658 17.5976 8.68342 17.2071 8.29289C16.8166 7.90237 16.1834 7.90237 15.7929 8.29289L10.5 13.5858L8.20711 11.2929C7.81658 10.9024 7.18342 10.9024 6.79289 11.2929C6.40237 11.6834 6.40237 12.3166 6.79289 12.7071L9.79289 15.7071C10.1834 16.0976 10.8166 16.0976 11.2071 15.7071L17.2071 9.70711Z"></path></svg> */ }

5
packages/ui/src/react/index.ts
View File

@@ -1,7 +1,8 @@
export * from "./hero-section"
export * from "./react-example"
export * from "./cursor"
export * from "./title-section"
export * from "./button"
export * from "./cursor"
export * from "./motion"
export * from "./title"
export * from "./text"
export * from "./text"

15
packages/ui/src/react/utils.ts Normal file
View File

@@ -0,0 +1,15 @@
import React from "react"
import { twMerge } from "tailwind-merge"
/**
* Clone React element.
* The function clones React element and adds Tailwind CSS classnames to the cloned element
* @param element the React element to clone
* @param classNames Tailwind CSS classnames
* @returns { React.ReactElement } - Cloned React element
*/
export function cloneElement(element: React.ReactElement, classNames: string) {
return React.cloneElement(element, {
className: twMerge(element.props.className, classNames)
});
}