<div class="fb-like" data-href="https://www.facebook.com/yourpage" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div>

<!-- تضمين مكتبة JavaScript الخاصة بـ Facebook -->
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

const { createClient } = require('@supabase/supabase-js')
const supabaseUrl = 'https://{YOUR_SUPABASE_URL}.supabase.co'
const supabaseKey = '{YOUR_SUPABASE_KEY}'
const supabase = createClient(supabaseUrl, supabaseKey)

const getVariableFromColumn = async () => {
  const { data, error } = await supabase
    .from('table_name')
    .select('variable_name')
    .eq('id', '123')
  
  if (error) console.log('Error fetching data:', error.message)
  else console.log('Data:', data)
}

getVariableFromColumn()

typescript
import { HandlerContext } from "$fresh/server.ts";
import { getCookies } from "$std/http/cookie.ts";
import { emojify } from "emojify";
import { databaseLoader } from "@/communication/database.ts";
import { RoomChannel } from "@/communication/channel.ts";
import { badWordsCleanerLoader } from "@/helpers/bad_words.ts";
import { ApiSendMessage } from "@/communication/types.ts";
import { OpenAI } from "openai";

export async function handler(
  req: Request,
  _ctx: HandlerContext
): Promise<Response> {
  const accessToken = getCookies(req.headers)["deploy_chat_token"];
  if (!accessToken) {
    return new Response("Not signed in", { status: 401 });
  }

  const database = await databaseLoader.getInstance();
  const user = await database.getUserByAccessTokenOrThrow(accessToken);
  const data = (await req.json()) as ApiSendMessage;
  const channel = new RoomChannel(data.roomId);
  const prooms = await database.getRoomPrompt(data.roomId);
  const from = {
    name: user.userName,
    avatarUrl: user.avatarUrl,
  };

  if (data.kind === "isTyping") {
    // Send `is typing...` indicator.
    channel.sendIsTyping(from);
  }

  const badWordsCleaner = await badWordsCleanerLoader.getInstance();
  const message = emojify(badWordsCleaner.clean(data.message));

  channel.sendText({
    message: message,
    from,
    createdAt: new Date().toISOString(),
  });

  await database.insertMessage({
    text: message,
    roomId: data.roomId,
    userId: user.userId,
  });

  // Stream data from OpenAI and send to channel
  if (message?.includes("@jpt")) {
    const openAI = new OpenAI(Deno.env.get("KEY_OPEN_AI") ?? "");

    const from = {
      name: "@JPT",
      avatarUrl: "https://jpt.ma/favicon.ico",
    };

    channel.sendIsTyping(from);

    const userContent = message.replace("@jpt", "");
    const SystemRoleContenet = prooms;

    openAI.stream({
      model: "davinci",
      prompt: SystemRoleContenet + userContent + "\nJPT:",
      temperature: 0.7,
      stop: ["\n"],
    }).on('data', (response) => {
      const data = response?.choices?.[0]?.text.trim();

      if (data) {
        channel.sendText({
          message: data,
          from,
          createdAt: new Date().toISOString(),
        });

        database.insertMessage({
          text: data,
          roomId: data.roomId,
          userId: 12345666,
        });
      }
    }).on('error', error => {
      console.error(error);
    });

  }

  channel.close();

  return new Response("OK");
}

jsx
import { Auth, Button } from '@supabase/ui'
import { supabase } from '../lib/initSupabase' // استبدل هذا بملف التكوين الخاص بك

const auth = new Auth(supabase)

function RegisterButton() {
  return (
    <Button block onClick={() => auth.signup()}>Sign up</Button>
  )
}

jsx
import { useState, useEffect } from "preact/hooks";
import { IntlProvider, Text } from "preact-i18n";

jsx
const [locale, setLocale] = useState("en");
const changeLocale = (newLocale) => {
  setLocale(newLocale);
  setCookie("locale", newLocale); // Save language to cookies for future use
};

jsx
useEffect(() => {
  const locale = getCookies().locale || data.locale || "en";
  setLocale(locale);
  import(`../locales/strings_${locale}.json`).then((strings) =>
    setMessages(strings.default)
  );
}, []);

jsx
<Text id="welcome" />

json
{
  "welcome": "Welcome to my website",
  "about": "About",
  "contact": "Contact",
  "message": "Send a message"
}

jsx
<button onClick={() => changeLocale("en")}>English</button>
<button onClick={() => changeLocale("ar")}>العربية</button>

https://github.com/fluidicon.png

npm install next-translate language-tags

javascript
const withTranslations = require('next-translate');

module.exports = withTranslations({
    // Define your supported languages here
    i18n: {
        locales: ['en', 'fr', 'ar'],
        defaultLocale: 'en',
    },
});

javascript
import { useRouter } from 'next/router';
import LanguageTag from 'language-tags';

const LangSwitcher = () => {

    // Use Next.js useRouter hook to get current locale
    const router = useRouter();

    // Get user language preference from browser
    const browserLang = navigator.language || navigator.userLanguage;

    // Create a language tag object from browser language
    const langTag = new LanguageTag(browserLang);

    // Check if the user-preferred language is supported
    if (router.locales.includes(langTag.language)) {

        // Set new locale using next-translate's `setLocale` method
        router.push(router.asPath, router.asPath, { locale: langTag.language });
    }

    // ... render language switcher component
};

async insertUser(user: DatabaseUser & { accessToken: string }) {
  const { error } = await this.#client.from("users").upsert(
    [
      {
        id: user.userId,
        username: user.userName,
        avatar_url: user.avatarUrl,
        access_token: user.accessToken,
      },
    ],
    {
      returning: "minimal",
      onConflict: {
        columns: ["username", "avatar_url", "access_token"],
        merge: ["username", "avatar_url", "access_token"],
      },
    }
  );
  if (error) {
    throw new Error(error.message);
  }
}

javascript
const {google} = require('googleapis');
const keys = {"web":{"client_id":"23233-qf5ipfc.apps.googleusercontent.com","project_id":"wino-blogz","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"GOCSPX-232323"}};

// تفاصيل المدونة الخاصة بك على بلوجر
const BLOG_ID = '232323232323';

// أولاً نحتاج إلى الحصول على إذن للوصول إلى حساب جوجل الخاص بك من خلال مفاتيح API الخاصة بك.
async function authorize() {
  const client = new google.auth.JWT(
      keys.web.client_email, null,
      keys.web.private_key, ['https://www.googleapis.com/auth/blogger']);
  await client.authorize();
  return client;
}

// إنشاء موضوع
async function createBlogPost(auth) {
  const blogger = google.blogger({version: 'v3', auth});
  const blogPost = {
    title: 'عنوان المدونة الجديد',
    content: 'هذا هو محتوى المدونة الجديد',
    labels: ['تسميات اختيارية'],
    blog: {
      id: BLOG_ID
    }
  };
  const res = await blogger.posts.insert(blogPost);
  console.log(res.data);
}

// تشغيل نظام المصادقة وإنشاء الموضوع الجديد بعد ذلك
authorize().then(createBlogPost).catch(console.error);

javascript
export default class Mojo {
  async render(req, ctx, method) {
    // قم بفصل وتجزئة المتغيرات والكائنات
    const { gpt, db, filter } = ctx.state;
    const url = new URL(req.url);
    const query = (q) => url.searchParams.get(q);
    
    // قم بفصل كود جلب البيانات بصيغة JSON
    const body = method === "get" ? [] : (await req.json()) || [];
    const json = (data, status = 200) => {
      return new Response(JSON.stringify(data), {
        status,
        headers: { "Content-Type": "application/json" },
      });
    };

    // قم بفصل كود إرجاع النص
    const text = (text, status = 200) => {
      return new Response(text, {
        status,
      });
    };

    // قم بإنشاء دالة لتسجيل الأحداث
    const log = async ({ status, module = "mojo", action = "log", error: _error, log }) => {
      // قم بتنفيذ كود تسجيل الأحداث هنا
    };

    // قم بتجزئة وإنشاء دالة لتنفيذ طلب البيانات من قاعدة البيانات
    const getData = async (tableName, filters) => {
      // قم بتنفيذ كود جلب البيانات من قاعدة البيانات هنا
    };

    // قم بفصل وتجزئة تحقق الصلاحية
    const checkPermission = () => {
      // قم بتنفيذ كود التحقق من الصلاحية هنا
    };

    // قم بفصل وتجزئة معالجة الفلترة
    const applyFilters = async (db, tableName, filters) => {
      // قم بتطبيق الفلاتر على قاعدة البيانات هنا
    };

    // قم بتجزئة وإنشاء دالة لتنفيذ الوظيفة الديناميكية
    const executeDynamicFunction = async (codeFunction, context) => {
      // قم بتنفيذ الوظيفة الديناميكية هنا
    };

    // قم بتجزئة وإنشاء دالة لتنفيذ طلب إنشاء البيانات
    const createData = async (tableName, data) => {
      // قم بتنفيذ طلب إنشاء البيانات هنا
    };

    // قم بتجزئة وإنشاء دالة لتنفيذ طلب تحديث البيانات
    const updateData = async (tableName, data) => {
      // قم بتنفيذ طلب تحديث البيانات هنا
    };

    // قم بتجزئة وإنشاء دالة لتنفيذ طلب حذف البيانات
    const deleteData = async (tableName, id) => {
      // قم بتنفيذ طلب حذف البيانات هنا
    };

    try {
      // قم بتجزئة وتنفيذ طلب جلب البيانات ومعالجتها
      const mojoData = await getData("mojos", {
        endpoint: ctx.params.land || query("endpoint") || body?.endpoint || "intial",
      });

      // قم بتجزئة وتنفيذ طلب الاختيار والتصفية
      const results = await applyFilters(db, mojoData.table, body?.filters);

      // قم بفصل وتجزئة التحقق من الصلاحية
      const hasPermission = checkPermission();

      // قم بفصل العمليات المستندة على الوظيفة الديناميكية
      if (mojoData.method === "function") {
        // قم بتجزئة وتنفيذ الوظيفة الديناميكية
        const result = await executeDynamicFunction(mojoData.function, ctx);
        return result;
      }

      // قم بفصل العمليات المستندة على طلب إنشاء البيانات
      if (mojoData.method === "create") {
        // قم بتجزئة وتنفيذ طلب إنشاء البيانات
        const result = await createData(mojoData.table, body?.insert);
        return result;
      }

      // قم بفصل العمليات المستندة على طلب تحديث البيانات
      if (mojoData.method === "update") {
        // قم بتجزئة وتنفيذ طلب تحديث البيانات
        const result = await updateData(mojoData.table, body?.update);
        return result;
      }

      // قم بفصل العمليات المستندة على طلب حذف البيانات
      if (mojoData.method === "delete") {
        // قم بتجزئة وتنفيذ طلب حذف البيانات
        const result = await deleteData(mojoData.table, query("id"));
        return result;
      }

      // قم بتجزئة العمليات القائمة على تصفح البيانات
      if (mojoData.method === "read") {
        // قم بتنفيذ وتطبيق عملية التصفية
        const result = await mojoFilter(null);
        return result;
      }
    } catch (error) {
      console.error("حدث خطأ أثناء معالجة الطلب: ", error);
      // قم بتسجيل الخطأ هنا
      return new Response("حدث خطأ، من فضلك حاول مرة أخرى!", { status: 500 });
    }

    return new Response("لا توجد خدمة مقدمة في هذا العنوان!", { status: 500 });
  }
}

export default class Mojo {
  async render(req, ctx, method) {
    const { gpt, db, filter } = ctx.state;
    const url = new URL(req.url);
    const query = (q) => url.searchParams.get(q);
    let body = [];
    try {
      body = method === "get" ? [] : (await req.json()) || [];
    } catch (error) {
      body = [];
    }

    const json = (data, status = 200) => {
      return new Response(JSON.stringify(data), {
        status,
        headers: { "Content-Type": "application/json" },
      });
    };

    const text = (text, status = 200) => {
      return new Response(text, { status });
    };

    const log = async ({
      status,
      module = "mojo",
      action = "log",
      error: _error,
      log,
    }) => {
      if (_error) action = "error";
      try {
        const { error } = await db.supabase.from("logs").insert({
          status,
          module,
          action,
          error: _error,
          log,
        });
        if (error) {
          throw JSON.stringify(error);
        }
        console.log("add log in db");
      } catch (error) {
        console.error("An error inserting data:", error.message);
        throw error;
      }
    };

    try {
      let { data: mojoDATA, error } = await db.supabase
        .from("mojos")
        .select("*")
        .eq("endpoint", ctx.params.land || query("endpoint") || body?.endpoint || "initial")
        .single();
        
      if (error) {
        throw error;
      }
      
      const validColumns = (bodyData) => {
        if (mojoDATA?.columns) {
          const { columns } = mojoDATA;
          if (columns === "all" || columns === "*") {
            return bodyData;
          } else {
            const arrColumns = columns.split(",");
            const validBody = Object.fromEntries(
              Object.entries(bodyData).filter(([key]) =>
                arrColumns.includes(key)
              )
            );
            return validBody;
          }
        }
      };
      
      const checkPermission = () => {
        if (!mojoDATA.method) return null;
        const permission = mojoDATA?.permissions
          ? mojoDATA.permissions[mojoDATA.method]
          : null;
        if (!permission) return null;

        const rolesArray = permission.split(",") || [];
        const found = ctx.state?.user?.roles.some(
          (roleObj) => rolesArray.includes(roleObj?.role.name)
        );
        
        return found;
      };
      
      const mojoFilter = async (mojoDB) => {
        if (!checkPermission()) return json({ error: "not permission!" }, 403);
        const id = query("id");
        const uuid = query("uuid");
        const limit = query("limit");
        const page = query("page");

        if (!mojoDB) {
          mojoDB = await db.supabase
            .from(mojoDATA.table)
            .select(mojoDATA.select ?? mojoDATA.columns ?? "uuid");
        }

        if (id) {
          mojoDB.eq("uuid", id || uuid);
        } else if (uuid) {
          mojoDB.eq("uuid", uuid);
        }

        if (mojoDATA.single) {
          mojoDB.single();
        }

        if (limit) {
          mojoDB.limit(limit);
        }

        if (page && mojoDATA?.pagination) {
          mojoDB.range(page - 1, page + limit || 10);
        }

        console.log("----", body?.filters, mojoDATA?.filters);

        if (body?.filters && mojoDATA?.filters) {
          const validFilters = {};

          for (const key in mojoDATA?.filters) {
            if (Object.prototype.hasOwnProperty.call(mojoDATA?.filters, key)) {
              const properties = mojoDATA?.filters[key].map((prop) => {
                if (
                  body.filters[key] &&
                  body.filters[key][prop] !== undefined
                ) {
                  return [prop, body.filters[key][prop]];
                } else {
                  console.log(
                    `Invalid key "${prop}" or missing value for filter "${key}"`
                  );
                  return null;
                }
              }).filter(Boolean);

              validFilters[key] = properties;
            }
          }

          const supportedFilters = [
            "eq",
            "gt",
            "lt",
            "gte",
            "lte",
            "like",
            "ilike",
            "is",
            "in",
            "neq",
            "cs",
            "cd",
          ];

          for (const filter in validFilters) {
            if (supportedFilters.includes(filter)) {
              for (const [key, value] of validFilters[filter]) {
                console.log("----", { filter }, { key, value });

                switch (filter) {
                  case "eq":
                    mojoDB.eq(key, value);
                    break;
                  case "gt":
                    mojoDB.gt(key, value);
                    break;
                  case "lt":
                    mojoDB.lt(key, value);
                    break;
                  case "gte":
                    mojoDB.greaterThanOrEqual(key, value);
                    break;
                  case "lte":
                    mojoDB.lessThanOrEqual(key, value);
                    break;
                  case "like":
                    mojoDB.like(key, value);
                    break;
                  case "ilike":
                    mojoDB.ilike(key, value);
                    break;
                  case "is":
                    mojoDB.is(key, value);
                    break;
                  case "in":
                    mojoDB.in(key, value);
                    break;
                  case "neq":
                    mojoDB.neq(key, value);
                    break;
                  case "cs":
                    mojoDB.cs(key, value);
                    break;
                  case "cd":
                    mojoDB.cd(key, value);
                    break;
                  default:
                    console.log(`Unsupported filter: ${filter}`);
                    break;
                }
              }
            } else {
              console.log(`Unsupported filter: ${filter}`);
            }
          }
        }

        const { data = [], error } = await mojoDB;

        if (error) {
          await log({
            status: mojoDATA.method,
            error,
            log: "Error In mOjO Land",
          });

          return json({ message: "Something went wrong!", error }, 500);
        }

        return json(data);
      };

      if (mojoDATA.method === "function") {
        const codeFunction = mojoDATA?.function;
        const content = SystemRoleContenet;

        const dynamicFunction = new Function(
          "mojo",
          `
          const { gpt, filter, body, db, endpoint } = mojo;
          let { content } = mojo;
          
          return (async () => {
            //
            ${codeFunction}
            //
          })();
        `
        );

        try {
          return await dynamicFunction({
            gpt,
            body,
            filter,
            json,
            text,
            query,
            content,
            db,
            log,
            endpoint: ctx.params.land,
          });
        } catch (error) {
          console.error("Error In Dynamic Function Mojo.Land: ", error);
          await log({
            status: "function",
            error,
            log: "Error In Dynamic Function Mojo.Land",
          });
          return json({ error: "Something went wrong!" }, 500);
        }
      }

      if (mojoDATA.method === "create") {
        const valideBodyInsert = validColumns(body?.insert);
        if (!valideBodyInsert) return text("No data to insert in body.insert", 402);

        let { data = [], error } = await db.supabase
          .from(mojoDATA.table)
          .insert(valideBodyInsert)
          .select(mojoDATA.select || "uuid");

        if (error) {
          throw error;
        }

        return json(data);
      }

      if (mojoDATA.method === "rpc") {
        let { data = [], error } = await db.supabase.rpc(mojoDATA.rpc, body);

        if (error) {
          throw error;
        }

        return json(data);
      }

      if (mojoDATA.method === "read") {
        return await mojoFilter(null);
      }

      if (mojoDATA.method === "post") {
        const mojoDB = db.supabase.from(mojoDATA.table).select(mojoDATA.select || mojoDATA.columns || "uuid");
        return await mojoFilter(mojoDB);
      }

      if (mojoDATA.method === "update") {
        console.log('body', body);

        const valideBodyUpdate = validColumns(body?.update);
        if (!valideBodyUpdate) return text("No data to update in body.insert", 402);

        const mojoDB = db.supabase.from(mojoDATA.table).update(valideBodyUpdate).select(mojoDATA.select || mojoDATA.columns || "uuid");
        return await mojoFilter(mojoDB);
      }

      if (mojoDATA.method === "delete") {
        let { data = [], error } = await db.supabase
          .from(mojoDATA.table)
          .delete()
          .eq("uuid", query("id"))
          .select();

        if (error) {
          throw error;
        }

        return json(data);
      }

      if (mojoDATA.method === "data") {
        return text(mojoDATA.data);
      }
    } catch (error) {
      console.error("Error occurred while processing request: ", error);
      await log({
        status: "request",
        error,
        log: "Error occurred while processing request:",
      });
      return new Response("Something went wrong!", { status: 500 });
    }

    return new Response("No endpoint here!", { status: 403 });
  }
}

html
<form>
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="status">
      Status
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="status"
      type="text"
      placeholder="Status"
    >
  </div>
  
  <!-- اضف باقي الحقول هنا -->
  
  <div class="flex items-center justify-between">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      حفظ
    </button>
  </div>
</form>

html
<form class="m-4">
  <!-- status -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="status">Status:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="status" name="status" type="text" placeholder="Status">
  </div>
  
  <!-- le_ar -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="le_ar">Le Ar:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="le_ar" name="le_ar" type="text" placeholder="Le Ar">
  </div>
  
  <!-- title_en -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="title_en">Title (EN):</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="title_en" name="title_en" type="text" placeholder="Title (EN)">
  </div>
  
  <!-- columns -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="columns">Columns:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="columns" name="columns" type="text" placeholder="Columns">
  </div>
  
  <!-- table -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="table">Table:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="table" name="table" type="text" placeholder="Table">
  </div>
  
  <!-- prefix -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="prefix">Prefix:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="prefix" name="prefix" type="text" placeholder="Prefix">
  </div>
  
  <!-- endpoint -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="endpoint">Endpoint:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="endpoint" name="endpoint" type="text" placeholder="Endpoint">
  </div>
  
  <!-- comment -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="comment">Comment:</label>
    <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="comment" name="comment" rows="4" placeholder="Comment"></textarea>
  </div>
  
  <!-- data -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="data">Data:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="data" name="data" type="text" placeholder="Data">
  </div>
  
  <!-- permissions -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="permissions">Permissions:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="permissions" name="permissions" type="text" placeholder="Permissions">
  </div>
  
  <!-- custom_sql -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="custom_sql">Custom SQL:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="custom_sql" name="custom_sql" type="text" placeholder="Custom SQL">
  </div>
  
  <!-- function -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="function">Function:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="function" name="function" type="text" placeholder="Function">
  </div>
  
  <!-- role -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="role">Role:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="role" name="role" type="text" placeholder="Role">
  </div>
  
  <!-- method -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="method">Method:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="method" name="method" type="text" placeholder="Method">
  </div>
  
  <!-- select -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="select">Select:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="select" name="select" type="text" placeholder="Select">
  </div>
  
  <!-- rpc -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="rpc">RPC:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="rpc" name="rpc" type="text" placeholder="RPC">
  </div>
  
  <!-- single -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="single">Single:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="single" name="single" type="checkbox">
  </div>
  
  <!-- log -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="log">Log:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="log" name="log" type="checkbox">
  </div>
  
  <!-- filters -->
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="filters">Filters:</label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="filters" name="filters" type="text" placeholder="Filters">
  </div>
  
  <!-- Submit button -->
  <div class="flex items-center justify-center">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
      Submit
    </button>
  </div>
</form>

import { h, Component } from 'preact';
import 'tailwindcss/tailwind.css';

class Form extends Component {
  render() {
    return (
      <div class="p-4 space-y-4">
        <input type="text" id="status" class="input-field" placeholder="Status" />
        <input type="text" id="le_ar" class="input-field" placeholder="Le_ar" />
        <input type="text" id="le_en" class="input-field" placeholder="Le_en" />
        <input type="text" id="columns" class="input-field" placeholder="Columns" />
        <input type="text" id="table" class="input-field" placeholder="Table" />
        <input type="text" id="prefix" class="input-field" placeholder="Prefix" />
        <input type="text" id="endpoint" class="input-field" placeholder="Endpoint" />
        <textarea id="comment" class="input-field" placeholder="Comment"></textarea>
        <textarea id="data" class="input-field" placeholder="Data"></textarea>
        <input type="text" id="permissions" class="input-field" placeholder="Permissions" />
        <input type="text" id="custom_sql" class="input-field" placeholder="Custom SQL" />
        <input type="text" id="function" class="input-field" placeholder="Function" />
        <input type="text" id="role" class="input-field" placeholder="Role" />
        <input type="text" id="method" class="input-field" placeholder="Method" />
        <input type="text" id="select" class="input-field" placeholder="Select" />
        <input type="text" id="rpc" class="input-field" placeholder="RPC" />
        <input type="checkbox" id="single" class="input-checkbox" />
        <label for="single" class="ml-2">Single</label>
        <input type="checkbox" id="log" class="input-checkbox" />
        <label for="log" class="ml-2">Log</label>
        <textarea id="filters" class="input-field" placeholder="Filters"></textarea>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    );
  }
}

export default Form;