BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 19:54:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

more store stuff :)

Browse Source
This commit is contained in:
SethBurkart123
2024-05-01 12:08:27 +10:00
parent f8ace7a7c9
commit 8e8821bb32
3 changed files with 76 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/Theme.tsx
+62 -62
View File
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
import PocketBase from 'pocketbase';
import { ThemesRecord } from "../types/pocketbase-types";
import ConfettiExplosion from 'react-confetti-explosion';
import { BackgroundBeams } from "../components/backgroundBeams";
import { LinkIcon } from "@heroicons/react/24/outline";
import { ToastContainer, toast } from 'react-toastify';
import browser from 'webextension-polyfill';
@@ -52,77 +51,78 @@ const Theme = () => {
return (
<>
{isLoading && (
{ isLoading && (
<div className="flex items-center justify-center min-h-screen">
<div className="w-32 h-32 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
</div>
)}
{theme && (
{ theme && (
<div className="flex flex-col items-center justify-center min-h-screen dark:text-white">
{ justCreated ? (
<>
{
displayConfetti && (
<ConfettiExplosion
className="absolute"
colors={['#FF0000', '#FF7F50', '#DE3163', '#40E0D0', '#6495ED']}
duration={5000}
width={1500}
force={1}
/>
)
}
<div className="text-center">
<h2 className="mb-2 text-2xl font-bold">Theme Created Successfully!</h2>
<p className="mb-8">Share the install link below with your friends to install the theme!</p>
<div
className="flex gap-2 py-2 pl-3 pr-2 text-white backdrop-blur-sm rounded-3xl ring-white/20 ring-1 bg-zinc-950/50"
>
<span className="my-auto">
{`https://share.betterseqta/theme?id=${themeID}`}
</span>
<button
className="flex gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 ring-1 bg-zinc-950/20 hover:bg-black/85"
onClick={() => {
navigator.clipboard.writeText(`https://share.betterseqta/theme?id=${themeID}`);
toast("Link copied to clipboard!");
}}
<div className="p-8 text-center shadow-xl rounded-2xl bg-zinc-800 min-w-96">
{ justCreated ? (
<>
{
displayConfetti && (
<ConfettiExplosion
className="absolute"
colors={['#FF0000', '#FF7F50', '#DE3163', '#40E0D0', '#6495ED']}
duration={5000}
width={1500}
force={1}
/>
)
}
<>
<h2 className="mb-2 text-2xl font-bold">Theme Created Successfully!</h2>
<p className="mb-8">Share the install link below with your friends to install the theme!</p>
<div
className="flex gap-2 py-2 pl-3 pr-2 text-white backdrop-blur-sm rounded-3xl ring-white/20 ring-1 bg-zinc-950/50"
>
<LinkIcon className="w-4 h-4" />
Copy Link
<span className="my-auto">
{`https://share.betterseqta/theme?id=${themeID}`}
</span>
<button
className="flex gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 ring-1 bg-zinc-950/20 hover:bg-black/85"
onClick={() => {
navigator.clipboard.writeText(`https://share.betterseqta/theme?id=${themeID}`);
toast("Link copied to clipboard!");
}}
>
<LinkIcon className="w-4 h-4" />
Copy Link
</button>
</div>
</>
</>
) : (
<>
<h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
<p className="mb-8">{theme.description}</p>
{
/* currentThemes.includes((theme.theme as { id: string }).id) */ false ?
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
>
Theme Installed
</button>
</div>
</div>
</>
) : (
<div className="text-center">
<h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
<p className="mb-8">{theme.description}</p>
{
/* currentThemes.includes((theme.theme as { id: string }).id) */ false ?
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
>
Theme Installed
</button>
:
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
onClick={() => {
browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } });
setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
}}
>
Install Theme
</button>
}
</div>
)}
:
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
onClick={() => {
browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } });
setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
}}
>
Install Theme
</button>
}
</>
)}
</div>
<ToastContainer theme="dark" />
</div>
)}
<BackgroundBeams className='-z-10' />
</>
);
};