mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 11:54:03 +01:00
Arthur DANJOU
3fa4f574d3
- Replaced Nuxt ESLint configuration with Antfu's ESLint config. - Removed 'nuxt-visitors' module from Nuxt configuration. - Added linting scripts to package.json for easier code quality checks. - Introduced a new API endpoint for fetching weather data from OpenWeather. - Enhanced chat types with new enums and properties for better state management. - Added OpenWeather response types for improved type safety. - Updated social links in types/index.ts to include an email contact.
99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Weather } from '~~/types'
|
|
|
|
const { t } = useI18n({ useScope: 'local' })
|
|
|
|
const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
|
$fetch('/api/weather'))
|
|
</script>
|
|
|
|
<template>
|
|
<UCard v-if="weather" variant="outline" class="md:max-w-2/3">
|
|
<template #header>
|
|
<div class="flex gap-4 items-center">
|
|
<UIcon name="i-ph-cloud-duotone" size="24" />
|
|
<h3 class="text-lg font-semibold">
|
|
{{ t('weather') }}
|
|
</h3>
|
|
</div>
|
|
</template>
|
|
|
|
<template #default>
|
|
<h3 class="text-2xl font-bold">
|
|
{{ weather.location }}
|
|
</h3>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-5xl font-bold">{{ weather.temperature }}°C</span>
|
|
<span class="capitalize text-lg">{{ weather.description }}</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mt-4">
|
|
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
|
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
|
{{ t('high') }}
|
|
</p>
|
|
<p class="font-semibold">
|
|
{{ weather.temp_max }}°C
|
|
</p>
|
|
</div>
|
|
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
|
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
|
{{ t('low') }}
|
|
</p>
|
|
<p class="font-semibold">
|
|
{{ weather.temp_min }}°C
|
|
</p>
|
|
</div>
|
|
<div class="bg-zinc-200 dark:bg-zinc-800 rounded-md p-2 text-center">
|
|
<p class="text-sm text-zinc-800 dark:text-zinc-400">
|
|
{{ t('humidity') }}
|
|
</p>
|
|
<p class="font-semibold">
|
|
{{ weather.humidity }}%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{{ t('wind') }}: {{ weather.wind }} km/h
|
|
</p>
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{{ t('powered_by') }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
|
|
<i18n lang="json">
|
|
{
|
|
"en": {
|
|
"weather": "Weather",
|
|
"powered_by": "Powered by OpenWeatherMap",
|
|
"low": "Low",
|
|
"high": "High",
|
|
"humidity": "Humidity",
|
|
"wind": "Wind"
|
|
},
|
|
"fr": {
|
|
"weather": "Météo",
|
|
"powered_by": "Alimenté par OpenWeatherMap",
|
|
"low": "Bas",
|
|
"high": "Haut",
|
|
"humidity": "Humidité",
|
|
"wind": "Vent"
|
|
},
|
|
"es": {
|
|
"weather": "Tiempo",
|
|
"powered_by": "Impulsado por OpenWeatherMap",
|
|
"low": "Bajo",
|
|
"high": "Alto",
|
|
"humidity": "Humedad",
|
|
"wind": "Viento"
|
|
}
|
|
}
|
|
</i18n>
|