38 lines
996 B
Plaintext
38 lines
996 B
Plaintext
---
|
|
interface Props {
|
|
dayName: string;
|
|
label: string;
|
|
icon: string;
|
|
temp: number;
|
|
}
|
|
|
|
const { dayName, label, icon, temp } = Astro.props;
|
|
|
|
const sizeClasses = 'w-32 md:w-40';
|
|
---
|
|
|
|
<div class="smooth-reveal-2 group flex flex-col">
|
|
<div class={`card-base ${sizeClasses}`}>
|
|
<div class="p-5 text-center">
|
|
<span class="card-text-description block font-bold text-xs uppercase tracking-widest">
|
|
{dayName}
|
|
</span>
|
|
<div class="flex justify-center my-2">
|
|
<img
|
|
src={`https://openweathermap.org/img/wn/${icon}@2x.png`}
|
|
alt={label}
|
|
class="h-12 w-12 drop-shadow-sm group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div class="mt-2">
|
|
<span class="card-text-title card-hover-text-title block text-2xl">
|
|
{temp}°F
|
|
</span>
|
|
<span class="card-text-description mt-1 block text-xs capitalize">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|