"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 router = useRouter(); const [name, setName] = useState(''); const [price, setPrice] = useState(0); const [description, setDescription] = useState(''); const [color, setColor] = useState('#000000'); const getData = async () => { } 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;