mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
121 lines
3 KiB
Text
121 lines
3 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
|
|
interface Tag {
|
|
text: string;
|
|
textColor: string;
|
|
bgColor: string;
|
|
}
|
|
|
|
interface Props {
|
|
image: ImageMetadata;
|
|
alt: string;
|
|
href: string;
|
|
title: string;
|
|
description: string;
|
|
label?: string;
|
|
tags?: Tag[];
|
|
}
|
|
|
|
const {
|
|
image,
|
|
alt,
|
|
href,
|
|
title,
|
|
description,
|
|
label = "View Repository",
|
|
tags,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div
|
|
class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
|
|
>
|
|
<div
|
|
class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
|
|
>
|
|
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
|
|
{title}
|
|
</h2>
|
|
<p
|
|
class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
|
|
>
|
|
{description}
|
|
</p>
|
|
<div
|
|
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
|
|
>
|
|
{
|
|
tags?.map((tag) => (
|
|
<div
|
|
class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
|
|
style={`
|
|
background-color: ${tag.bgColor || "black"};
|
|
color: ${tag.textColor || "white"};
|
|
`}
|
|
>
|
|
{tag.text}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="mb-10 flex items-center justify-center lg:hidden">
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
|
|
>{label}</a
|
|
>
|
|
</div>
|
|
<div
|
|
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
|
|
>
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
class=`absolute max-w-full
|
|
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
|
|
border-2 border-solid border-white rounded-xl`
|
|
`
|
|
width="700"
|
|
/>
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
width="700"
|
|
class=`absolute max-w-full
|
|
top-1/2 left-1/2
|
|
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
|
|
border-2 border-solid border-white rounded-xl`
|
|
/>
|
|
<div
|
|
class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
|
|
>
|
|
<a
|
|
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
|
target="_blank"
|
|
class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
|
|
>{label}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.image-container img {
|
|
transition: transform 0.5s ease-in-out;
|
|
}
|
|
@media (min-width: 1025px) {
|
|
.image-container:hover > img {
|
|
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
|
translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
.image-container:hover > .visit-div {
|
|
opacity: 100%;
|
|
transition: opacity 0.3s ease-in-out;
|
|
transition-delay: 0.3s;
|
|
}
|
|
}
|
|
</style>
|