Counter

App.tsx

import './App.css'
import Button from './components/Button'
import Counter , {CounterProfile} from './components/Counter'
import { useState } from 'react'

function App() {
  const [counter, setCounter] = useState(0)
  const [Logika, setLogika] = useState(true) 
  return (
    <>
      <CounterProfile />
      <Button text="Click me"
        eventOnClick={() => {
          setCounter(counter + 1);
        }} 
      />
      <Counter text={counter} />

      {counter > 10?(
        <p>Lebih dari 10</p>
      ):(
        <p>Dibawah 10</p>
      )}
      <p>{Logika ? "Benar" : "Salah"}</p>
    </>
  )
}

export default App

components/Button.tsx

type ButtonProps = {
    text: string;
    eventOnClick: () => void;
};

function Button({ text, eventOnClick }: ButtonProps) {
    return (
        <button onClick={eventOnClick}>
            {text}
        </button>
    );
}

export default Button;

components/Counter.tsx

type CounterProps = {
    text: number;
};

function Counter({ text }: CounterProps) {
    return <p>Nilai Counter : {text}</p>
}

export function CounterProfile() {
    return (
        <>
            <h2>Click button to increase</h2>
            <hr />
        </>
    );
}

export default Counter;