import React, { useState } from 'react';
import { BLUE } from './colors';

export default function CustomForm({ label, type = 'text' }) {
  const [whois, setWhois] = useState('');
  
  const handleSubmit = e => {
    e.preventDefault();
    console.log('whois:', whois);
  };
  
  return (
    <form className="custom-form" onSubmit={handleSubmit}>
      <div className="field" style={{ color: BLUE }}>
        {label && <label htmlFor="whois">{label}</label>}
        <input
          id="whois"
          type={type}
          onChange={e => setWhois(e.target.value)}
        />
      </div>
      <button className="custom-btn" type="submit">Ok</button>
    </form>
  );
}

<script setup>
import { ref } from 'vue';
import { GREEN } from './colors';

defineProps({
  label: String,
  type: {
    type: String,
    default: 'text'
  }
});

const whois = ref('');

const handleSubmit = () => console.log('whois:', whois.value);
</script>

<template>
  <form class="custom-form" @submit.prevent="handleSubmit">
    <div class="field" :style="{ color: GREEN }">
      <label v-if="label" for="whois">{{ label }}</label>
      <input id="whois" :type="type" @input="whois.value = $event.target.value">
    </div>
    <button class="custom-btn" type="submit">Ok</button>
  </form>
</template>

import { Component, Input } from '@angular/core';
import { RED } from './colors';

@Component({
  selector: 'custom-form',
  template: `
    <form class="custom-form" (submit)="handleSubmit($event)">
      <div class="field" [style.color]="red">
        @if (label) {
          <label for="whois">{{ label }}</label>
        }
        <input id="whois" [type]="type" (input)="setWhois($event)">
      </div>
      <button class="custom-btn" type="submit">Ok</button>
    </form>
  `
})
export class CustomForm {
  @Input() label?: string;
  @Input() type = 'text';

  whois = '';

  get red(): string {
    return RED;
  }

  setWhois(e: Event) {
    this.whois = (e.target as HTMLInputElement).value;
  }

  handleSubmit(e: Event) {
    e.preventDefault();
    console.log('whois:', this.whois);
  }
}

$ npm create vite@latest
$ npm install -D vitest @vitest/ui

import express from 'express';

const server = express();

// application/json
server.use(express.json());
// application/x-www-form-urlencoded
server.use(express.urlencoded({ extended: true }));

server.get('/hello', (req, res) => {
  res.json({ hello: 'world' });
});

server.post('/user', (req, res) => {
  console.log(req.body);
  res.status(201).send({ id: 'aGVsbG8=' });
});

server.listen(3000, err => {
  if (err) process.exit(1);
  console.log("Server Runnin'...");
});

import fastify from 'fastify';

const server = fastify({ logger: true });

server.get('/hello', (request, reply) => {
  reply.send({ hello: 'world' })
});

server.post('/user', (request, reply) => {
  reply.header("Access-Control-Allow-Origin", "*");
  reply.header("Access-Control-Allow-Methods", "POST");
  
  server.log.info(request.body);
  reply.code(201).send({ id: 'aGVsbG8=' });
});

server.listen({ port: 3000 }, err => {
  if (err) process.exit(1);
  server.log.info("Server Runnin'...");
});

import { signal } from '@preact/signals';
import { PURPLE } from './colors';

const whois = signal('');

export default function CustomForm({ label, type = 'text' }) {
  const handleSubmit = e => {
    e.preventDefault();
    console.log('whois:', whois.value);
  };
  
  return (
    <form className="custom-form" onSubmit={handleSubmit}>
      <div className="field" style={{ color: PURPLE }}>
        {label && <label htmlFor="whois">{label}</label>}
        <input
          id="whois"
          type={type}
          onChange={e => (whois.value = e.target.value)}
        />
      </div>
      <button className="custom-btn" type="submit">Ok</button>
    </form>
  );
}

<script>
  import { ORANGE } from './colors';

  let { label, type = 'text' } = $props();
  let whois = $state('');
  
  const handleSubmit = e => {
    e.preventDefault();
    console.log('whois:', whois);
  };
</script>

<form class="custom-form" onsubmit={handleSubmit}>
  <div class="field" style:color={ORANGE}>
    {#if label}
      <label for="whois">{label}</label>
    {/if}
    <input id="whois" {type} oninput={e => (whois = e.target.value)}>
  </div>
  
  <button class="custom-btn" type="submit">Ok</button>
</form>

import { createSignal } from 'solid-js';
import { INDIGO } from './colors';

export default function CustomForm({ label, type = 'text' }) {
  const [whois, setWhois] = createSignal('');
  
  const handleSubmit = e => {
    e.preventDefault();
    console.log('whois:', whois());
  };
  
  return (
    <form class="custom-form" onSubmit={handleSubmit}>
      <div class="field" style={{ color: INDIGO }}>
        {label && <label for="whois">{label}</label>}
        <input
          id="whois"
          type={type}
          onChange={e => setWhois(e.target.value)}
        />
      </div>
      <button class="custom-btn" type="submit">Ok</button>
    </form>
  );
}

<form class="flex flex-col space-y-4 p-4">
  <div
    class="flex space-x-2 hover:text-white hover:bg-['#06b6d4']"
    style="color:#06b6d4;">
    <label for="whois">WHOIS</label>
    <input id="whois" type="text">
  </div>
  
  <button
    class="mx-4 md:mx-auto py-2 px-4 rounded-full"
    type="submit">
    Ok
  </button>
</form>

const handler = async (req: Request): Promise<Response> => {
  const url = new URL(req.url);

  if (url.pathname === "/hello" && req.method === "GET") {
    return new Response(JSON.stringify({ hello: "world" }));
  }

  if (url.pathname === "/user" && req.method === "POST") {
    const body = await req.json();
    console.log(body);

    const response = new Response(JSON.stringify({ id: "aGVsbG8=" }), {
      status: 201,
    });
    
    response.headers.set("Access-Control-Allow-Origin", "*");
    response.headers.set("Access-Control-Allow-Methods", "POST");
    return response;
  }

  return new Response(null, { status: 404 });
};

Deno.serve({ port: 3000 }, handler);

$ npm i -g @nestjs/cli
$ nest new my-project