94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
|
|
import { playOutline, statsChartOutline, personOutline } from 'ionicons/icons';
|
|
import img from '../assets/groot.jpg'
|
|
|
|
const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL
|
|
|
|
const startBullpen = () => {
|
|
console.log('Starting bullpen session');
|
|
};
|
|
|
|
const showStats = () => {
|
|
console.log('Showing bullpen stats');
|
|
};
|
|
|
|
const showProfile = () => {
|
|
console.log('Showing profile');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>User Home</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding">
|
|
<div class="user-container">
|
|
<ion-avatar class="user-avatar">
|
|
<img :src="img" alt="User Profile" class="avatar-frame" />
|
|
</ion-avatar>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<ion-button expand="full" @click="startBullpen" class="full-width">
|
|
<ion-icon :icon="playOutline" slot="start" />
|
|
Start Bullpen Session
|
|
</ion-button>
|
|
<ion-button expand="full" @click="showStats" class="full-width">
|
|
<ion-icon :icon="statsChartOutline" slot="start" />
|
|
Show Bullpen Stats
|
|
</ion-button>
|
|
<ion-button expand="full" @click="showProfile" class="full-width">
|
|
<ion-icon :icon="personOutline" slot="start" />
|
|
Show Profile
|
|
</ion-button>
|
|
</div>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.user-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30vh;
|
|
background-color: #f0f0f0; /* Change background color of top area */
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: 4px solid #ccc;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
height: 60vh;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
</style> |