diff --git a/app/admin/page.tsx b/app/admin/page.tsx new file mode 100644 index 0000000..5324285 --- /dev/null +++ b/app/admin/page.tsx @@ -0,0 +1,41 @@ +"use client"; +import { createClient } from "@/utils/supabase/client"; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; +function PageComponent() { + const supabase = createClient(); + const getData = async () => { + } + + useEffect(() => { + getData(); + }, []); + const router = useRouter(); + return ( +
+
+
+ System Settings +
+
+ + + +
+
+ + +
+
+ + +
+
+
+ ); +} + +export default PageComponent; + + + diff --git a/app/admin/theme/page.tsx b/app/admin/theme/page.tsx new file mode 100644 index 0000000..47805ce --- /dev/null +++ b/app/admin/theme/page.tsx @@ -0,0 +1,474 @@ +"use client"; +import { createClient } from "@/utils/supabase/client"; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; + +function PageComponent() { + const router = useRouter(); + const supabase = createClient(); + + const [primary, setPrimary] = useState('#201240'); + const [primaryLight, setPrimaryLight] = useState('#403260'); + const [primaryDark, setPrimaryDark] = useState('#100120'); + const [secondary, setSecondary] = useState('#4F3D70'); + const [secondaryLight, setSecondaryLight] = useState('#6F5D90'); + const [secondaryDark, setSecondaryDark] = useState('#2F1D50'); + const [error, setError] = useState('#862117'); + const [errorLight, setErrorLight] = useState('#C44C4C'); + const [errorDark, setErrorDark] = useState('#5C0D0D'); + const [changed, setChanged] = useState(false); + const [success, setSuccess] = useState('#00C9A6'); + const [successLight, setSuccessLight] = useState('#20E9C6'); + const [successDark, setSuccessDark] = useState('#00A986'); + const [warning, setWarning] = useState('#E17558'); + const [warningLight, setWarningLight] = useState('#E39578'); + const [warningDark, setWarningDark] = useState('#C15538'); + const [info, setInfo] = useState('#222140'); + const [infoLight, setInfoLight] = useState('#424260'); + const [infoDark, setInfoDark] = useState('#020120'); + const [saving, setSaving] = useState(false); + + const getData = async () => { + var primaryConfig = await getColorConfig('primary'); + setPrimary(primaryConfig.value); + var primaryLightConfig = await getColorConfig('primary-light'); + setPrimaryLight(primaryLightConfig.value); + var primaryDarkConfig = await getColorConfig('primary-dark'); + setPrimaryDark(primaryDarkConfig.value); + var secondaryConfig = await getColorConfig('secondary'); + setSecondary(secondaryConfig.value); + var secondaryLightConfig = await getColorConfig('secondary-light'); + setSecondaryLight(secondaryLightConfig.value); + var secondaryDarkConfig = await getColorConfig('secondary-dark'); + setSecondaryDark(secondaryDarkConfig.value); + var errorConfig = await getColorConfig('error'); + setError(errorConfig.value); + var errorLightConfig = await getColorConfig('error-light'); + setErrorLight(errorLightConfig.value); + var errorDarkConfig = await getColorConfig('error-dark'); + setErrorDark(errorDarkConfig.value); + var successConfig = await getColorConfig('success'); + setSuccess(successConfig.value); + var successLightConfig = await getColorConfig('success-light'); + setSuccessLight(successLightConfig.value); + var successDarkConfig = await getColorConfig('success-dark'); + setSuccessDark(successDarkConfig.value); + var warningConfig = await getColorConfig('warning'); + setWarning(warningConfig.value); + var warningLightConfig = await getColorConfig('warning-light'); + setWarningLight(warningLightConfig.value); + var warningDarkConfig = await getColorConfig('warning-dark'); + setWarningDark(warningDarkConfig.value); + var infoConfig = await getColorConfig('info'); + setInfo(infoConfig.value); + var infoLightConfig = await getColorConfig('info-light'); + setInfoLight(infoLightConfig.value); + var infoDarkConfig = await getColorConfig('info-dark'); + setInfoDark(infoDarkConfig.value); + } + + const getColorConfig = async (name: string) => { + try { + const response = await fetch(`/api/admin/interface-configs?name=${name}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) { + throw new Error('Failed to call GET request'); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error(error); + throw new Error('Failed to call GET request'); + } + } + + const setColorConfig = async (name: string, value:string) => { + try { + const response = await fetch(`/api/admin/interface-configs`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ name, value }), + }); + + if (!response.ok) { + throw new Error('Failed to call GET request'); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error(error); + throw new Error('Failed to call GET request'); + } + } + + + const save = async () => { + setSaving(true); + await Promise.all([ + setColorConfig('primary', primary), + setColorConfig('primary-light', primaryLight), + setColorConfig('primary-dark', primaryDark), + setColorConfig('secondary', secondary), + setColorConfig('secondary-light', secondaryLight), + setColorConfig('secondary-dark', secondaryDark), + setColorConfig('error', error), + setColorConfig('error-light', errorLight), + setColorConfig('error-dark', errorDark), + setColorConfig('success', success), + setColorConfig('success-light', successLight), + setColorConfig('success-dark', successDark), + setColorConfig('warning', warning), + setColorConfig('warning-light', warningLight), + setColorConfig('warning-dark', warningDark), + setColorConfig('info', info), + setColorConfig('info-light', infoLight), + setColorConfig('info-dark', infoDark) + ]); + window.location.reload(); + } + + + useEffect(() => { + getData(); + }, []); + + const colorChange = async ()=>{ + setChanged(true) + document.documentElement.style.setProperty(`--color-primary`, primary); + document.documentElement.style.setProperty(`--color-primary-light`, primaryLight); + document.documentElement.style.setProperty(`--color-primary-dark`, primaryDark); + document.documentElement.style.setProperty(`--color-secondary`, secondary); + document.documentElement.style.setProperty(`--color-secondary-light`, secondaryLight); + document.documentElement.style.setProperty(`--color-secondary-dark`, secondaryDark); + document.documentElement.style.setProperty(`--color-error`, error); + document.documentElement.style.setProperty(`--color-error-light`, errorLight); + document.documentElement.style.setProperty(`--color-error-dark`, errorDark); + document.documentElement.style.setProperty(`--color-success`, success); + document.documentElement.style.setProperty(`--color-success-light`, successLight); + document.documentElement.style.setProperty(`--color-success-dark`, successDark); + document.documentElement.style.setProperty(`--color-warning`, warning); + document.documentElement.style.setProperty(`--color-warning-light`, warningLight); + document.documentElement.style.setProperty(`--color-warning-dark`, warningDark); + document.documentElement.style.setProperty(`--color-info`, info); + document.documentElement.style.setProperty(`--color-info-light`, infoLight); + document.documentElement.style.setProperty(`--color-info-dark`, infoDark); + } + + return ( +
+
+
+ Color Settings + + +
+
+ +
+ { setPrimary(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setPrimary(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setPrimaryLight(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setPrimaryLight(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setPrimaryDark(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setPrimaryDark(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+ + + + + + + + + +
+ +
+ { setSecondary(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSecondary(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setSecondaryDark(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSecondaryDark(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setSecondaryLight(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSecondaryLight(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+ + + + + + + + + +
+ +
+ { setError(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setError(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setErrorDark(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setErrorDark(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setErrorLight(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setErrorLight(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+ + + + + + + + + +
+ +
+ { setSuccess(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSuccess(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setSuccessDark(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSuccessDark(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+ +
+ { setSuccessLight(e.target.value); colorChange(); }} + placeholder="Choose the primary color" + /> + { setSuccessLight(e.target.value); colorChange(); }} + required + + type="color" + className="w-10 h-10 rounded-r p-1" + /> +
+
+
+
+ ); +} + +export default PageComponent; + + + diff --git a/app/admin/tiers/create/page.tsx b/app/admin/tiers/create/page.tsx index 02a98db..46083b4 100644 --- a/app/admin/tiers/create/page.tsx +++ b/app/admin/tiers/create/page.tsx @@ -1,57 +1,124 @@ "use client"; import { createClient } from "@/utils/supabase/client"; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; function PageComponent() { - const supabase = createClient(); - const getData = async () => { - } + const supabase = createClient(); + const router = useRouter(); + const [name, setName] = useState(''); + const [price, setPrice] = useState(0); + const [description, setDescription] = useState(''); + const [color, setColor] = useState('#000000'); - useEffect(() => { - getData(); - }, []); -return ( -
-
-
- {}} - className="mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" - placeholder="Tag Name" /> -
- - $ - - -
-
-
- -
-
- -
- {}} placeholder="Choose the tiers color"/> - -
- - + useEffect(() => { + getData(); + }, []); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const data = { + name, + price, + color, + description + }; + const response = await fetch('/api/tiers', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); + + if (response.ok) { + const responseData = await response.json(); + window.location.href = "/admin/tiers"; + } else { + console.log(response); + } + } + + return ( +
+
+
+
+ Creating New Tier +
+
+ { setName(e.target.value) }} + className="mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" + placeholder="Tag Name" + /> +
+ + $ + + { setPrice(Number(e.target.value)) }} + required + placeholder="Price in USD per month" + type="number" + className="flex-1 min-w-0 bg-info-bright rounded-r-md px-3 py-2 text-black focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" + /> +
+
+
+ +
+
+
+ { setColor(e.target.value) }} + placeholder="Choose the tiers color" + /> + { setColor(e.target.value) }} + required + id="colorInput" + type="color" + className="absolute right-0 top-0 w-10 h-full rounded-r p-1" + /> +
+ + +
+
-
-); + ); } export default PageComponent; - - - diff --git a/app/admin/tiers/page.tsx b/app/admin/tiers/page.tsx index 5e6fb41..b4424b0 100644 --- a/app/admin/tiers/page.tsx +++ b/app/admin/tiers/page.tsx @@ -1,58 +1,53 @@ "use client"; import { createClient } from "@/utils/supabase/client"; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; function PageComponent() { - const supabase = createClient(); - const getData = async () => { - } - - useEffect(() => { - getData(); - }, []); - - -const fakeData = [ - { - description: "Lorem ipsum dolor sit amet", - color: "#5e3573", - price: 9.99, - name: "Product 1" - }, - { - description: "Consectetur adipiscing elit", - color: "#00FF00", - price: 19.99, - name: "Product 2" - }, - { - description: "Sed do eiusmod tempor incididunt", - color: "#0000FF", - price: 29.99, - name: "Product 3" + const router = useRouter(); + const supabase = createClient(); + const [tiers, setTiers] = useState([]); + const getData = async () => { + try { + const response = await fetch('/api/tiers'); + if (response.ok) { + const data = await response.json(); + console.log(data) + setTiers(data); + } else { + console.error('Failed to fetch users'); + } + } catch (error) { + console.error('Error fetching users:', error); + } } -]; -// Rest of the code... + useEffect(() => { + getData(); + }, []); -return ( -
-
-
- -
-
- {fakeData.map((item, index) => ( -
-
- + return ( +
+
+
+ Tiers Management +
+
+ + +
+
+ {tiers.map((item, index) => ( +
+
+ +
-
- ))} + ))} +
-
-); + ); } export default PageComponent; diff --git a/app/admin/tiers/view/page.tsx b/app/admin/tiers/view/page.tsx index 1a67c0f..cb6b07d 100644 --- a/app/admin/tiers/view/page.tsx +++ b/app/admin/tiers/view/page.tsx @@ -1,127 +1,139 @@ "use client"; import { createClient } from "@/utils/supabase/client"; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; function PageComponent() { - const supabase = createClient(); - const getData = async () => { - } + const router = useRouter(); + const supabase = createClient(); + const [tier, setTier] = useState([]); + const [users, setUsers] = useState([]); + const [name, setName] = useState(''); + const [price, setPrice] = useState(0); + const [description, setDescription] = useState(''); + const [color, setColor] = useState('#000000'); + const getData = async () => { + try { + const searchParams = new URLSearchParams(window.location.search); + const name = searchParams.get('name'); + const response = await fetch('/api/tiers/'+name); + if (response.ok) { + const data = await response.json(); + console.log(data) + setTier(data); + setName(data.name); + setPrice(data.price); + setDescription(data.description); + setColor(data.color); + } else { + console.error('Failed to fetch users'); + } + } catch (error) { + console.error('Error fetching users:', error); + } + } + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const data = { + newName:name, + price, + color, + description + }; + const response = await fetch('/api/tiers/'+name, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); -const [users, setUsers] = useState([ - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' }, - { email: 'user1@example.com' }, - { email: 'user2@example.com' }, - { email: 'user3@example.com' } - // Add more fake users as needed -]); + if (response.ok) { + const responseData = await response.json(); + window.location.href = "/admin/tiers"; + } else { + console.log(response); + } + } + useEffect(() => { + getData(); + }, []); - - useEffect(() => { - getData(); - }, []); -return ( -
-
-
- {}} - className="mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" - placeholder="Tag Name" /> -
- - $ - - -
-
-
- -
-
-
- {}} placeholder="Choose the tiers color"/> - -
-
- - - + return ( +
+
+
+
+ Editing Existing Tier +
+
+ { setName(e.target.value) }} + className="mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" + placeholder="Tag Name" + /> +
+ + $ + + { setPrice(Number(e.target.value)) }} + required + placeholder="Price in USD per month" + type="number" + className="flex-1 min-w-0 bg-info-bright rounded-r-md px-3 py-2 text-black focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" + /> +
+
+
+ +
+
+
+ { setColor(e.target.value) }} + placeholder="Choose the tiers color" + /> + { setColor(e.target.value) }} + required + id="colorInput" + type="color" + className="absolute right-0 top-0 w-10 h-full rounded-r p-1" + /> +
+ + + +
+
-
-
-
- - - {users.map((data, index) => ( - - - - - ))} - -
{data.email}0 Months
-
-
-
-); + ); } export default PageComponent; diff --git a/app/api/admin/interface-configs/route.tsx b/app/api/admin/interface-configs/route.tsx new file mode 100644 index 0000000..81a9e11 --- /dev/null +++ b/app/api/admin/interface-configs/route.tsx @@ -0,0 +1,26 @@ +import { NextApiRequest, NextApiResponse } from 'next'; +import { createClient } from "@/utils/supabase/server"; +import { NextResponse } from "next/server"; + + +export async function PUT(request: Request) { + const body = await request.json(); + console.log(body) + const supabase = createClient(); + var value = body.value; + const { error } = await supabase.from('interface_configurations').update({ value }).eq('name', body.name); + console.log(error) + if (error) { + return NextResponse.error(); + } + return NextResponse.json({}); +} + +export async function GET(request: NextApiRequest, response: NextApiResponse) { + + const url = new URL(request.url as string, 'http://localhost'); + const name = url.searchParams.get('name') || ''; + const supabase = createClient(); + const { data, error } = await supabase.from('interface_configurations').select('*').eq('name', name).single(); + return NextResponse.json(data); +} \ No newline at end of file diff --git a/app/api/admin/users/route.tsx b/app/api/admin/users/route.tsx index 7f550f9..ac63c19 100644 --- a/app/api/admin/users/route.tsx +++ b/app/api/admin/users/route.tsx @@ -4,14 +4,12 @@ import { NextResponse } from "next/server"; export async function GET(request: Request) { try { - const supabase = createClient(); - + const supabase = createClient(); const { data, error } = await supabase.auth.admin.listUsers(); console.log(error) if (error) { throw error; } - return NextResponse.json(data); } catch (error) { return NextResponse.error(); diff --git a/app/api/galleries/admin/[id]/route.ts b/app/api/galleries/admin/[id]/route.ts index 89d047a..a1c6acd 100644 --- a/app/api/galleries/admin/[id]/route.ts +++ b/app/api/galleries/admin/[id]/route.ts @@ -27,7 +27,6 @@ export async function PUT( const tier = formData.get('tier')?.toString(); const thumbnail = formData.get('thumbnail'); - console.log(tier) const { error } = await supabase.from('galleries').update({name, tags, nsfw, tier, thumbnail_file:thumbnail}).eq('name', originalName ?? ''); async function renameFolder(oldFolderName: any, newFolderName: string) { diff --git a/app/api/tiers/[name]/route.ts b/app/api/tiers/[name]/route.ts new file mode 100644 index 0000000..7f1fba6 --- /dev/null +++ b/app/api/tiers/[name]/route.ts @@ -0,0 +1,36 @@ +import { NextResponse } from "next/server"; +import { createClient } from "@/utils/supabase/server"; + +export async function GET( + request: Request, + { params }: { params: { name: string } } +) { + const supabase = createClient(); + + const { data: tier, error: galleryError } = await supabase + .from('tiers') + .select('*') + .eq('name', params.name) + .single(); + + if(galleryError) { + return NextResponse.error(); + } + + return NextResponse.json(tier); +} +export async function PUT( + request: Request, + { params }: { params: { name: string } } +) { + const supabase = createClient(); + const { newName, price, color, description } = await request.json(); + console.log(newName) + const { error } = await supabase.from('tiers') + .update({ name:newName, price, color, description }).eq('name', params.name); + if (error) { + console.error('Error updating tier:', error); + return NextResponse.error(); + } + return NextResponse.json({}); +} \ No newline at end of file diff --git a/app/api/tiers/route.ts b/app/api/tiers/route.ts index 4926400..9081e8a 100644 --- a/app/api/tiers/route.ts +++ b/app/api/tiers/route.ts @@ -23,4 +23,4 @@ export async function POST(request: Request) { } return NextResponse.json(data); } - \ No newline at end of file + diff --git a/app/gallery/admin/create/page.tsx b/app/gallery/admin/create/page.tsx index a853578..5f826c2 100644 --- a/app/gallery/admin/create/page.tsx +++ b/app/gallery/admin/create/page.tsx @@ -1,13 +1,12 @@ "use client"; import { createClient } from "@/utils/supabase/client"; import React, { useState, useEffect } from 'react'; -import Search from "@/components/neroshitron/search"; -import Gallery from "@/components/neroshitron/gallery"; +import { useRouter } from 'next/navigation'; import Masonry from "react-masonry-css"; import SearchInput from "@/components/neroshitron/search_input"; function PageComponent() { - + const router = useRouter(); const [selectedGallery, setSelectedGallery] = useState(null); const [filePreviews, setFilePreviews] = useState([]); const [name, setName] = useState(''); @@ -87,7 +86,7 @@ function PageComponent() { placeholder="Gallery Name" />
-
diff --git a/app/gallery/admin/page.tsx b/app/gallery/admin/page.tsx index 74c0acb..acd4609 100644 --- a/app/gallery/admin/page.tsx +++ b/app/gallery/admin/page.tsx @@ -1,13 +1,11 @@ "use client"; import { createClient } from "@/utils/supabase/client"; import React, { useState, useEffect } from 'react'; -import Search from "@/components/neroshitron/search"; -import Gallery from "@/components/neroshitron/gallery"; -import Masonry from "react-masonry-css"; import SearchInput from "@/components/neroshitron/search_input"; +import { useRouter } from 'next/navigation'; function PageComponent() { - + const router = useRouter(); const supabase = createClient(); const user = supabase.auth.getUser(); const [tags, setTags] = useState([]); @@ -62,18 +60,13 @@ function PageComponent() { getData(); }, [tagsState, newTagName]); - const data = [ - { id: 1, name: "Item 1", imageCount: 5, tier: "Tier 1" }, - { id: 2, name: "Item 2", imageCount: 10, tier: "Tier 2" }, - { id: 3, name: "Item 3", imageCount: 8, tier: "Tier 1" }, - ]; return (
- {setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-105 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" placeholder="Tag Name" /> -
- {setTagSearch(e.target.value)}} className="hover:scale-105 focus:scale-105 mb-8 shadow-lg mr-2 rounded-md bg-info-bright p-2 w-full text-black" placeholder="Search all tags by name" /> + {setTagSearch(e.target.value)}} className=" mb-8 shadow-lg mr-2 rounded-md bg-info-bright p-2 w-full text-black" placeholder="Search all tags by name" />
@@ -94,7 +87,7 @@ function PageComponent() {
{item.name} -
-
-
-
+
+
@@ -134,7 +127,7 @@ function PageComponent() {
{item.imageCount} {item.tier} -