BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +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/Store.tsx
+14 -18
View File
@@ -98,31 +98,27 @@ const Store = () => {
<div className="grid grid-cols-1 gap-8 py-4 mx-auto md:grid-cols-2 lg:grid-cols-3">
{filteredThemes.map((theme, index) => (
<CardContainer key={index} className='w-full cursor-pointer'>
<CardBody className="bg-gray-50 w-full transition-all duration-300 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] h-auto rounded-xl p-6 border">
<CardItem
translateZ={30}
<div key={index} className='w-full cursor-pointer'>
<div className="bg-gray-50 w-full transition-all duration-300 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] h-auto rounded-xl p-6 border">
<div
className="mb-1 text-xl font-bold text-neutral-600 dark:text-white">
{theme.name}
</CardItem>
<CardItem
as="p"
translateZ={25}
className="max-w-sm mb-4 text-sm text-neutral-500 dark:text-neutral-300">
</div>
<p
className="max-w-sm mb-4 text-sm text-neutral-500 dark:text-neutral-300">
{theme.description}
</CardItem>
<CardItem
className='w-full'
translateZ={15}>
</p>
<div
className='w-full'>
<img src={theme.image} alt="Theme Preview" className="object-cover w-full h-48 rounded-md" />
</CardItem>
<CardItem>
</div>
<div>
<button className="px-4 py-2 mt-4 transition rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
Download
</button>
</CardItem>
</CardBody>
</CardContainer>
</div>
</div>
</div>
))}
</div>
</div>
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' />
</>
);
};