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

add store page

Browse Source
This commit is contained in:
SethBurkart123
2024-04-07 18:22:23 +10:00
parent 9b64c3c260
commit dbe8f61c21
5 changed files with 140 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -70,6 +70,7 @@
"react-shadow": "^20.4.0",
"rimraf": "^5.0.5",
"sortablejs": "^1.15.2",
"swiper": "^11.1.0",
"tailwindcss": "^3.4.1",
"ts-loader": "^9.5.1",
"typescript": "^5.3.3",
src/interface/components/store/header.tsx
+30
View File
@@ -0,0 +1,30 @@
import logo from '../../../resources/icons/betterseqta-dark-full.png';
import logoDark from '../../../resources/icons/betterseqta-light-full.png';
export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) {
return <header className="sticky top-0 z-50 w-full bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800">
<div className="flex items-center justify-between px-4 py-1">
<img src={logo} className="h-16 dark:hidden" />
<img src={logoDark} className="hidden h-16 dark:block" />
<div className="relative">
<input
type="text"
placeholder="Search themes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="px-4 py-2 pl-10 bg-gray-100 rounded-full dark:bg-zinc-700 dark:text-gray-100 focus:outline-none focus:border-transparent" />
<svg
className="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
</header>;
}
src/interface/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title>
</head>
<body>
<body class="dark:bg-zinc-900">
<div id="ExtensionPopup"></div>
<script type="module" src="./main.tsx"></script>
<script type="module" src="./dark.ts"></script>
src/interface/main.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import ThemeCreator from './pages/ThemeCreator';
import Store from './pages/Store';
browser.storage.local.get().then(({ telemetry, DarkMode }) => {
if (DarkMode) document.body.classList.add('dark');
if (DarkMode) document.documentElement.classList.add('dark');
if (telemetry === true)
Sentry.init({
src/interface/pages/Store.tsx
+108 -5
View File
@@ -1,9 +1,112 @@
import { useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Scrollbar, Autoplay } from 'swiper/modules';
import Header from '../components/store/header';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';
const Store = () => {
return (
<div>
<h2>Store</h2>
</div>
)
const [searchTerm, setSearchTerm] = useState('');
const swiperCover = useRef<any | null>(null);
const coverThemes = [
{
coverImage: 'https://via.placeholder.com/300x200',
name: 'Theme Name',
description: 'Theme description goes here.'
},
{
coverImage: 'https://via.placeholder.com/300x200',
name: 'Theme Name',
description: 'Theme description goes here.'
},
{
coverImage: 'https://via.placeholder.com/300x200',
name: 'Theme Name',
description: 'Theme description goes here.'
}
]
return (
<div className="w-screen h-screen overflow-y-scroll bg-zinc-100 dark:bg-zinc-900">
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
<div className="px-32 py-12">
<div className="relative w-full bg-green-100 aspect-[8/3] rounded-xl overflow-clip">
<Swiper
ref={swiperCover}
spaceBetween={0}
slidesPerView={1}
modules={[Scrollbar, Autoplay]}
navigation
autoplay={{
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true
}}
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
{ coverThemes.map((theme, index) => (
<SwiperSlide key={index}>
<img
src={theme.coverImage}
alt="Theme Preview"
className="object-cover w-full h-full"
/>
</SwiperSlide>
)) }
</Swiper>
{/* pagination */}
<div className='absolute z-10 flex gap-2 bottom-2 right-2'>
<button onClick={ () => {swiperCover.current?.swiper.slidePrev() }} className='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
</svg>
</button>
<button onClick={ () => {swiperCover.current?.swiper.slideNext() }} className='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-8 px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{
Array.from({ length: 30 }).map((_, index) => (
<div key={index} className="overflow-hidden bg-white rounded-lg shadow-md dark:bg-zinc-800">
<img
src="https://via.placeholder.com/300x200"
alt="Theme Preview"
className="object-cover w-full h-48"
/>
<div className="p-4">
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">
Theme Name
</h3>
<p className="mt-2 text-gray-600 dark:text-gray-400">
Theme description goes here.
</p>
<button className="px-4 py-2 mt-4 text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Install
</button>
</div>
</div>))}
</div>
</div>
);
};
export default Store;