Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 19:41:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Create Card component

Browse Source
This commit is contained in:
Sat Naing
2022-09-09 22:40:42 +06:30
parent 6bc4f44b66
commit 1c2606ba16
1 changed files with 45 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Card.astro
+45 -67
View File
@@ -1,76 +1,54 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
body: string; body: string;
href: string; href: string;
secHeading?: boolean;
} }
const { href, title, body } = Astro.props; const { href, title, body, secHeading = true } = Astro.props;
--- ---
<li class="link-card"> <li>
<a href={href}> <a href={href}>
<h2> {secHeading ? <h2>{title}</h2> : <h3>{title}</h3>}
{title} </a>
<span>&rarr;</span> <div class="date-time-wrapper">
</h2> <svg xmlns="http://www.w3.org/2000/svg" class="calendar"
<p> ><path
{body} d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
</p> ></path><path
</a> d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
></path>
</svg>
<span class="date-time">June 9, 2022 | 10:12 AM</span>
</div>
<p>
{body}
</p>
</li> </li>
<style> <style>
:root { li {
--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%); @apply mt-6;
} }
a {
.link-card { @apply text-skin-accent font-medium text-lg;
list-style: none; }
display: flex; a h2,
padding: 0.15rem; a h3 {
background-image: var(--link-gradient); @apply font-medium text-lg;
background-size: 400%; }
border-radius: 0.5rem; .date-time-wrapper {
background-position: 100%; @apply my-1 opacity-80;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
} .calendar {
@apply scale-90;
.link-card > a { }
width: 100%; .date-time {
text-decoration: none; @apply italic text-base;
line-height: 1.4; }
padding: 1em 1.3em; svg {
border-radius: 0.35rem; @apply w-6 h-6 inline-block fill-skin-base;
color: var(--text-color); }
background-color: white;
opacity: 0.8;
}
h2 {
margin: 0;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.75rem;
margin-bottom: 0;
}
h2 span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
}
.link-card:is(:hover, :focus-within) h2 {
color: #4f39fa;
}
.link-card:is(:hover, :focus-within) h2 span {
will-change: transform;
transform: translateX(2px);
}
</style> </style>