mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
fix: styling for tags search
This commit is contained in:
parent
4c972778cd
commit
73836c5893
24
app/admin/page.tsx
Normal file
24
app/admin/page.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function PageComponent() {
|
||||
const supabase = createClient();
|
||||
|
||||
const getData = async () => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
return (
|
||||
|
||||
<div className="w-full text-white flex justify-center items-center animate-in">
|
||||
<div className="w-2/3 rounded-md bg-primary p-12 mt-32">
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PageComponent;
|
||||
@ -10,12 +10,16 @@ function PageComponent() {
|
||||
|
||||
const supabase = createClient();
|
||||
const user = supabase.auth.getUser();
|
||||
const [galleries, setGalleries] = useState([]);
|
||||
const [tags, setTags] = useState([]);
|
||||
const [nsfwState, setNsfwState] = useState<boolean>(false);
|
||||
const [tagsState, setTagsState] = useState<string[]>([]);
|
||||
const [searchState, setSearchState] = useState<string>("");
|
||||
const [galleries, setGalleries] = useState([]);
|
||||
|
||||
const getData = async () => {
|
||||
const tagsResponse = await fetch(`/api/galleries/tags`);
|
||||
const tagsData = await tagsResponse.json();
|
||||
setTags(tagsData);
|
||||
const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -39,42 +43,76 @@ function PageComponent() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full text-white flex justify-center items-center animate-in">
|
||||
<div className="w-1/2 rounded-md bg-primary p-12 mt-32">
|
||||
<div className="w-full flex">
|
||||
<SearchInput placeholderTags={[
|
||||
{ value: "tags", label: "❗️ click here to add tags to search" }
|
||||
]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
|
||||
<a href="/gallery/admin/create" className="ml-2 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
|
||||
Create
|
||||
</a>
|
||||
</div>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2" style={{ width: '60%' }}></th>
|
||||
<th className="px-4 py-2" style={{width:"15%"}}></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Replace this with your data mapping logic */}
|
||||
{galleries.map((item: { name: string, imageCount: number, tier: string }) => (
|
||||
<tr key={item.name} className="animate-in">
|
||||
<td className="px-4 py-2">{item.name}</td>
|
||||
<td className="px-4 py-2">{item.imageCount}</td>
|
||||
<td className="px-4 py-2">{item.tier.replace("Tier","")}</td>
|
||||
<td className="px-4 py-2">
|
||||
<a href="/gallery/admin/view" className="bg-secondary hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
|
||||
View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="w-full h-1/2 text-white flex justify-center items-center animate-in">
|
||||
<div className="w-full lg:w-1/3 rounded-md bg-primary p-12 m-1 mt-32">
|
||||
<div className="w-full flex">
|
||||
<input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white" placeholder="Tag Name" />
|
||||
<button className="ml-2 w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full flex">
|
||||
<input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" />
|
||||
</div>
|
||||
<div className="w-full h-96 overflow-y-scroll no-scrollbar">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2" style={{ width: '90%' }}></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tags.map((item:any) => (
|
||||
<tr key={item.name} className="animate-in">
|
||||
<td className="px-4 py-2">{item.name}</td>
|
||||
<td className="px-4 py-2">
|
||||
<button className="bg-error hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 rounded-md bg-primary p-12 m-1 mt-32">
|
||||
<div className="w-full flex">
|
||||
<SearchInput placeholderTags={[
|
||||
{ value: "tags", label: "❗️ click here to add tags to search" }
|
||||
]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
|
||||
|
||||
<a href="/gallery/admin/create" className="ml-2 max-h-14 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
|
||||
Create
|
||||
</a>
|
||||
</div>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2" style={{ width: '60%' }}></th>
|
||||
<th className="px-4 py-2" style={{width:"15%"}}></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Replace this with your data mapping logic */}
|
||||
{galleries.map((item: { name: string, imageCount: number, tier: string }) => (
|
||||
<tr key={item.name} className="animate-in">
|
||||
<td className="px-4 py-2">{item.name}</td>
|
||||
<td className="px-4 py-2">{item.imageCount}</td>
|
||||
<td className="px-4 py-2">{item.tier.replace("Tier","")}</td>
|
||||
<td className="px-4 py-2">
|
||||
<a href="/gallery/admin/view" className="bg-secondary hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
|
||||
View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ function PageComponent() {
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-2/3">
|
||||
<div className="w-2/4">
|
||||
<Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -50,6 +50,12 @@ console.log(currentPage)
|
||||
>
|
||||
<span className="hidden lg:block">Gallery Admin</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/"
|
||||
className={`py-2 px-3 w-38 text-center flex rounded-md lg:block hidden no-underline ${currentPage!="gallery" ? 'bg-secondary hover:bg-secondary-light' : 'bg-secondary hover:bg-secondary-light'}`}
|
||||
>
|
||||
<span className="hidden lg:block">System Settings</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/gallery"
|
||||
|
||||
@ -63,7 +63,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: "🏷️ "+tag.name }));
|
||||
const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
|
||||
return (
|
||||
<>
|
||||
<div className={` ${scrollPosition>0 ?? 'opacity-30'} opacity 0 relative w-full flex flex-col items-center justify-center z-10`}>
|
||||
@ -101,7 +101,26 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
|
||||
menu: "bg-secondary-dark text-white pb-4 rounded",
|
||||
searchBox: "rounded-md bg-secondary w-1/2 text-white w-full mt-2 p-2 mb-2 animate-in",
|
||||
searchIcon: "hidden",
|
||||
tagItem: (value) => "bg-primary-light rounded-md pl-2 p-1 m-1 flex",
|
||||
tagItemText: "text-white",
|
||||
closeIcon: "text-white"
|
||||
}}
|
||||
|
||||
formatOptionLabel={data => (
|
||||
<li
|
||||
className={`animate-in block transition rounded duration-200 px-2 py-2 cursor-pointer select-none truncate pt-2 ${
|
||||
!data.isSelected
|
||||
? `text-white bg-primary hover:bg-primary-light`
|
||||
: `bg-primary-light text-white`
|
||||
}`}
|
||||
>
|
||||
{data.label}
|
||||
</li>
|
||||
)}
|
||||
value={selectedTagsInput}
|
||||
primaryColor={"indigo"} />
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user