6. Latihan

Latihan 1

Tambahkan props id, value, name menjadi required/wajib pada komponen InputText, sehingga akan error pada Text Editor jika props tidak dikirimkan pada saat komponen digunakan.

Latihan 2

Berikan props, conditional className dan spread operator pada komponen Button, sehingga komponen button akan memiliki pilihan User Interface seperti di gambar di bawah.

interface props button

type Variant = 'solid' | 'outline'
type ColorSchema = 'blue' | 'red' | 'green'


interface ButtonProps {
  title: string;
  isDisabled?: boolean;
  variant? : Variant,
  colorSchema : ColorSchema

}

Latihan 3

Buatlah komponen Label dengan interface Props seperti di bawah.

interface props label

interface LabelProps {
  htmlFor: string;
  isRequired?: boolean;
  title:string
} 

Berikan tanda * jika Label isRequired bernilai true

Hasil Yang diharapkan

Copy Paste Kode di bawah pada app/page/tsx.

app/page.tsx

"use client"
import Button from "./component/Button";
import InputText from "./component/InputText";
import Label from "./component/Label";
import Latihan from "./component/latihan";
import Note from "./component/Note";

const Home = () => {
  return (
    <main className="space-y-5">
      <h1>Hello World</h1>

      <section>
        <Label title="username" htmlFor="username" isRequired />
        <InputText
          id="username"
          name="username"
          value={"ihsanabuhanifah"}
          placeholder="username"
          type="text"
          messageError="Username not empty"
        />
      </section>
      <section>
        <Label title="password" htmlFor="password" isRequired />
        <InputText
          id="password"
          name="password"
          value={"12345678"}
          placeholder="******"
          type="passoword"
        />
      </section>

      <section>
        <Label title="name" htmlFor="name" />
        <InputText
          id="name"
          name="name"
          value={"ihsan"}
          onChange={() => {
            console.log("ok");
          }}
        />
      </section>

      <section className="space-x-5">
        <Button
          title="simpan"
          isDisabled={false}
          variant="solid"
          colorSchema="blue"
        />
         <Button
          title="simpan"
          isDisabled={true}
          variant="solid"
          colorSchema="blue"
        />
        <Button
          title="Update"
          isDisabled={false}
          variant="outline"
          colorSchema="blue"
        />
         <Button
          title="Update"
          isDisabled={true}
          variant="outline"
          colorSchema="blue"
        />
        <Button
          title="Draft"
          isDisabled={false}
          variant="outline"
          colorSchema="green"
        />

        <Button title="batal" isDisabled variant="solid" colorSchema="red" />
        <Button title="batal" isDisabled={false} variant="solid" colorSchema="red" />
      </section>
    </main>
  );
};

export default Home;

Ketika menjalankan kode di atas pada app/page.jsxmaka pada browser seperti pada gambar di bawah.