Ionic

// Ionic React component example
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import React, { useState } from 'react';

const Home: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic React App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <p>Count: {count}</p>
        <IonButton onClick={() => setCount(count + 1)}>Increment</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

// Ionic Angular component example
/*
import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private alertController: AlertController) {}

  async showAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      message: 'This is an alert!',
      buttons: ['OK']
    });

    await alert.present();
  }
}
*/

// Ionic Vue component example
/*
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Vue App</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="increment">Count: {{ count }}</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { ref } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/vue';

export default {
  components: { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton },
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    
    return { count, increment };
  }
}
</script>
*/