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

demo download functionality

Browse Source
This commit is contained in:
SethBurkart123
2024-05-03 11:54:41 +10:00
parent 52cd3a0930
commit 9091b6d09d
3 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/store/header.tsx
+2 -2
View File
@@ -5,8 +5,8 @@ export default function header({ searchTerm, setSearchTerm }: { searchTerm: stri
return <header className="sticky top-0 z-50 w-full bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl"> return <header className="sticky top-0 z-50 w-full bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl">
<div className="flex items-center justify-between px-4 py-1"> <div className="flex items-center justify-between px-4 py-1">
<div className="cursor-pointer" onClick={() => setSearchTerm('')}> <div className="cursor-pointer" onClick={() => setSearchTerm('')}>
<img src={logo} className="h-16 dark:hidden" /> <img src={logo} className="h-14 dark:hidden" />
<img src={logoDark} className="hidden h-16 dark:block" /> <img src={logoDark} className="hidden h-14 dark:block" />
</div> </div>
<div className="relative"> <div className="relative">
<input <input
src/interface/pages/Store.tsx
+8 -2
View File
@@ -45,8 +45,12 @@ const Store = () => {
)); ));
}, [searchTerm, gridThemes]); }, [searchTerm, gridThemes]);
const downloadTheme = (id: string) => {
window.open(`https://betterseqta.pockethost.io/api/v1/themes/${id}/download`, '_blank');
};
return ( return (
<div className="w-screen h-screen overflow-y-scroll bg-zinc-100 dark:bg-zinc-900"> <div className="w-screen h-screen overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900">
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} /> <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
@@ -131,7 +135,9 @@ const Store = () => {
<img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48 rounded-md" /> <img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48 rounded-md" />
</div> </div>
<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"> <button
onClick={() => downloadTheme(theme.id)}
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 Download
</button> </button>
</div> </div>
src/interface/pages/Theme.tsx
+3 -3
View File
@@ -100,11 +100,11 @@ const Theme = () => {
<h2 className="mb-2 text-2xl font-bold">{theme.name}</h2> <h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
<p className="mb-8">{theme.description}</p> <p className="mb-8">{theme.description}</p>
{ {
/* currentThemes.includes((theme.theme as { id: string }).id) */ false ? currentThemes.includes((theme.theme as { id: string }).id) ?
<button <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" 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 Theme Downloaded!
</button> </button>
: :
<button <button
@@ -114,7 +114,7 @@ const Theme = () => {
setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]); setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
}} }}
> >
Install Theme Download Theme
</button> </button>
} }
</> </>