feat: move improved components out of ui folder
This commit is contained in:
62
src/components/cards/EducationCard.astro
Normal file
62
src/components/cards/EducationCard.astro
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
interface Props {
|
||||
topic: string;
|
||||
area: string;
|
||||
date: string;
|
||||
url: string;
|
||||
logoUrlLight?: string;
|
||||
logoUrlDark?: string;
|
||||
logoIcon?: string;
|
||||
}
|
||||
|
||||
const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="smooth-reveal group flex flex-col">
|
||||
<a
|
||||
class="card-base flex items-center"
|
||||
href={url}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<div class="flex items-center">
|
||||
{logoUrlLight ? (
|
||||
<div class="card-hover-icon-scale mr-5">
|
||||
<Logo
|
||||
srcLight={logoUrlLight}
|
||||
srcDark={logoUrlDark}
|
||||
alt={`Logo of ${topic}`}
|
||||
/>
|
||||
</div>
|
||||
) : logoIcon ? (
|
||||
<div class="mr-5 text-header">
|
||||
<Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
|
||||
</div>
|
||||
) : null}
|
||||
<div class="grow text-left">
|
||||
<span class="card-text-title block text-lg">
|
||||
{topic}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1 font-medium text-xs uppercase">
|
||||
{area} - {new Date(date).getFullYear()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-6 flex">
|
||||
<div class="relative inline-block">
|
||||
<div class="card-text-title card-hover-text-title flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4">
|
||||
<span class="relative inline-block overflow-hidden">
|
||||
Visit Page
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
39
src/components/cards/FeaturesCard.astro
Normal file
39
src/components/cards/FeaturesCard.astro
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
url?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const { title, description, url, icon } = Astro.props;
|
||||
|
||||
const sizeClasses = 'h-30 w-100 md:w-[300px]';
|
||||
---
|
||||
|
||||
<div class="smooth-reveal-2 group flex flex-col">
|
||||
<a
|
||||
class={`card-base flex items-center ${sizeClasses}`}
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="p-5 w-full">
|
||||
<div class="flex items-center">
|
||||
<Icon
|
||||
name={icon}
|
||||
class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
|
||||
/>
|
||||
<div class="ms-5 grow text-left">
|
||||
<span class="card-text-title card-hover-text-title block text-lg">
|
||||
{title}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
72
src/components/cards/HighlightsCard.astro
Normal file
72
src/components/cards/HighlightsCard.astro
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
url?: string;
|
||||
logoUrlLight?: string;
|
||||
logoUrlDark?: string;
|
||||
highlights?: string[];
|
||||
visitSource?: boolean;
|
||||
}
|
||||
|
||||
const { title, description, url, logoUrlLight, logoUrlDark, highlights, visitSource } = Astro.props;
|
||||
|
||||
const visitText = visitSource ? 'Visit Source' : 'Visit Page';
|
||||
const visitClass = visitSource ? 'card-hover-text-gitea' : 'card-hover-text-title';
|
||||
---
|
||||
|
||||
<div class="smooth-reveal group flex flex-col">
|
||||
<a
|
||||
class="card-base flex items-center"
|
||||
href={url}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<div class="flex items-center mb-4">
|
||||
{logoUrlLight && (
|
||||
<div class="card-hover-icon-scale mr-5">
|
||||
<Logo
|
||||
srcLight={logoUrlLight}
|
||||
srcDark={logoUrlDark}
|
||||
alt={`Logo of ${title}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div class="grow text-left">
|
||||
<span class="card-text-title block text-lg">
|
||||
{title}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{highlights && (
|
||||
<ul class="card-text-description text-sm mt-1 flex flex-col list-disc gap-2 [&>li]:ml-4">
|
||||
{highlights.map((highlight) => (
|
||||
<li class="marker:text-accent">
|
||||
{highlight}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<div class="ml-6 flex">
|
||||
<div class="relative inline-block">
|
||||
<div class={`card-text-title ${visitClass} flex relative items-center mx-auto min-h-11 font-semibold text-md sm:mx-0 sm:mt-4`}>
|
||||
{visitSource && <Icon name="pajamas:gitea" />}
|
||||
<span class="relative inline-block overflow-hidden ml-2">
|
||||
{visitText}
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
37
src/components/cards/WeatherCard.astro
Normal file
37
src/components/cards/WeatherCard.astro
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
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="card-hover-icon-scale h-12 w-12"
|
||||
/>
|
||||
</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>
|
||||
Reference in New Issue
Block a user