Twimg.js (Create 功能)
TwUpdate.js (Update 功能)
TwDelete.js (Delete 功能)

// components/Twimg.js
import React, {useState} from "react";

function Twimg() {
  const [title, setTitle] = useState(null);
  const [description, setDesc] = useState(null);
  const [imgSrc, setImgSrc] = useState(null);

  return (
    <div>Twimg</div>
  )
}

export default Twimg

繼續修改 Twimg.js

// components/Twimg.js
import React, {useState} from "react";
import { supabaseAdmin } from "../client"

function Twimg() {
  const [id, setId] = useState('99');
  const [title, setTitle] = useState(null);
  const [description, setDesc] = useState(null);
  const [imageSrc, setImageSrc] = useState(null);
  
  // create one row	
  async function handleSubmit(e){
    e.preventDefault();
    const {data, error} = await supabaseAdmin
      .from("images")
      .insert([ { 
        id: id,
	      title: title,
        description: description,
        imageSrc: imageSrc,
        href: imageSrc,
        userName: "User005"   } ]
      );

  }

  return (
    <div>
      <form action="" onSubmit={(e) => handleSubmit(e)}>
        <input type="text" value={id} 
          onChange = {e => setId(e.target.value)} 
          className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
          placeholder="ID" />
        <div>
          <input type="text" value={title} 
            onChange = {e => setTitle(e.target.value)} 
            className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
            placeholder="Title" />
        </div>
        <input type="text" value={description} 
          onChange = {e => setDesc(e.target.value)} 
          className="bg-gray-100 w-2/3 rounded-lg px-4 py-2 mb-2 ml-4" 
          placeholder="Description" />
        <div>
          <input type="text" value={imageSrc} 
            onChange = {e => setImageSrc(e.target.value)} 
            className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
            placeholder="ImageSrc" />
        </div>
        <button type="submit" 
          className="bg-emerald-500 px-5 py-2 rounded-xl 
          font-bold text-white w-1/5 my-4 
	      mx-4 shadow-emerald-300 shadow-lg">Submit</button>
        
      </form>
    </div>
  )
}

export default Twimg

TwUpdate.js (Update 功能)

// components/TwUpdate.js
mport React, {useState} from "react";
import { supabaseAdmin } from "../client"

function TwUpdate() {
  const [imgId, setImgId] = useState(null);
  const [title, setTitle] = useState(null);
  const [description, setDesc] = useState(null);
  const [imageSrc, setImageSrc] = useState(null);
  
  // create one row	
  async function handleSubmit(e){
    e.preventDefault();

    const {data, error} = await supabaseAdmin
      .from("images")
      .update({ 
        title: title,
        description: description,
        imageSrc: imageSrc,
        href: imageSrc,
        userName: "User005"   } )
      .eq("id", imgId);

    if (error) alert(error.message);

  }

  return (
    <div>
      <form action="" onSubmit={(e) => handleSubmit(e)}>
        <input type="number" value={imgId} 
        onChange = {e => setImgId(e.target.value)} 
          className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
           />
        <div>
          <input type="text" value={title} 
          onChange = {e => setTitle(e.target.value)} 
            className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
             />
        </div>
        <input type="text" value={description} 
        onChange = {e => setDesc(e.target.value)} 
          className="bg-gray-100 w-2/3 rounded-lg px-4 py-2 mb-2 ml-4" 
           />
        <div>
          <input type="text" value={imageSrc} 
          onChange = {e => setImageSrc(e.target.value)} 
            className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
             />
        </div>
        <button type="submit" 
          className="bg-emerald-500 px-5 py-2 
          rounded-xl font-bold text-white w-1/5 my-4 
	      mx-4 shadow-emerald-300 shadow-lg">Submit</button>
        
      </form>
    </div>
  )
}

export default TwUpdate

TwDelete.js (Delete 功能)

import React, {useState} from "react";
import { supabaseAdmin } from "../client"

function TwDelete() {
  const [imgId, setImgId] = useState(null);
  const [title, setTitle] = useState(null);
  const [description, setDesc] = useState(null);
  const [imageSrc, setImageSrc] = useState(null);
  
  // create one row	
  async function handleSubmit(e){
    e.preventDefault();

    const {data, error} = await supabaseAdmin
      .from("images")
      .delete().eq('id', imgId);

    if (error) alert(error.message);

    if (!error) alert("Success");

  }

  return (
    <div>
      <form action="" onSubmit={(e) => handleSubmit(e)}>
        <input type="number" value={imgId} 
        onChange = {e => setImgId(e.target.value)} 
          className="bg-gray-100 w-1/3 rounded-lg px-4 py-2 mb-2 ml-4" 
           />
        <button type="submit" 
          className="bg-emerald-500 px-5 py-2 
          rounded-xl font-bold text-white w-1/5 my-4 
	      mx-4 shadow-emerald-300 shadow-lg">Delete</button>
        
      </form>
    </div>
  )
}

export default TwDelete