2024-06-04 22:59:02 -04:00
"use client" ;
import { createClient } from "@/utils/supabase/client" ;
import React , { useState , useEffect } from 'react' ;
function PageComponent() {
const supabase = createClient ( ) ;
const getData = async ( ) = > {
}
2024-06-04 23:07:20 -04:00
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
] ) ;
2024-06-04 22:59:02 -04:00
useEffect ( ( ) = > {
getData ( ) ;
} , [ ] ) ;
return (
< div className = "w-full p-8 h-1/2 text-white lg:flex justify-center items-center animate-in" >
2024-06-04 23:07:20 -04:00
< div className = "w-full lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur" >
< div className = "w-full flex" >
< input type = "text" onChange = { ( e ) = > { } }
className = "mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg"
placeholder = "Tag Name" / >
< div className = "flex border border-gray-300 w-1/2 rounded-md" >
< span className = "flex items-center bg-gray-100 rounded-l-md border-r px-3 text-gray-500" >
$
< / span >
< input
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"
/ >
< / div >
< / div >
< div className = "w-full pt-2 justify-center flex" >
< textarea placeholder = "Description of the tier and what the user gets from subscribing." rows = { 3 } className = "w-full rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" >
2024-06-04 22:59:02 -04:00
2024-06-04 23:07:20 -04:00
< / textarea >
< / div >
< div className = "w-full pt-2 justify-center flex" >
< div className = "w-1/2 relative" >
< input type = "text" className = "w-full rounded-md bg-info-bright p-2 text-black shadow-lg" onChange = { ( e ) = > { } } placeholder = "Choose the tiers color" / >
< input id = "colorInput" type = "color" className = "absolute right-0 top-0 w-10 h-full rounded-r p-1" / >
2024-06-04 22:59:02 -04:00
< / div >
2024-06-04 23:07:20 -04:00
< div className = "w-1/2 flex" >
< button onClick = { ( ) = > { } } className = "hover:scale-95 shadow-lg ml-2 w-1/2 h-10 text-center bg-warning hover:bg-warning-light text-white font-bold rounded flex items-center justify-center" >
Update
< / button >
< button onClick = { ( ) = > { } } className = "hover:scale-95 shadow-lg ml-2 w-1/2 h-10 text-center bg-error hover:bg-error-light text-white font-bold rounded flex items-center justify-center" >
Delete
< / button >
< button onClick = { ( ) = > { } } className = "hover:scale-95 shadow-lg ml-2 w-1/2 h-10 text-center bg-error-dark hover:bg-error text-white font-bold rounded flex items-center justify-center" >
Back
< / button >
2024-06-04 22:59:02 -04:00
< / div >
< / div >
< / div >
2024-06-04 23:07:20 -04:00
< div className = "w-full lg:w-1/3 h-96 rounded-md bg-primary opacity-90 p-6 mt-32 shadow-lg backdrop-blur no-scrollbar overflow-y-scroll" >
< div className = "w-full flex" >
< table className = "w-full" >
< tbody >
{ users . map ( ( data , index ) = > (
< tr key = { index } className = "rounded hover:bg-secondary bg-secondary-dark shadow-lg" >
< td className = "px-4 py-2" > { data . email } < / td >
< td className = "px-4 py-2" > 0 Months < / td >
< / tr >
) ) }
< / tbody >
< / table >
< / div >
< / div >
< / div >
2024-06-04 22:59:02 -04:00
) ;
}
export default PageComponent ;