rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #3

Merged
RizqiSyahrendra merged 2 commits from dev into main 2025-02-26 15:55:11 +00:00
Conversation 0 Commits 2 Files Changed 8 +33 -45
3 changed files with 33 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c50b9c982f - Show all commits

15
src/app/globals.css
View File

@ -8,6 +8,7 @@
--ext-color-primary-3: #2e2d51;
--ext-color-primary-4: #d4a187;
--ext-color-primary-5: #e7ccc0;
--ext-color-primary-6: #64b3b4;
--background: #ffffff;
--foreground: #171717;
}
@ -19,6 +20,7 @@
--ext-color-primary-3: #2e2d51;
--ext-color-primary-4: #d4a187;
--ext-color-primary-5: #e7ccc0;
--ext-color-primary-6: #64b3b4;
--background: #0a0a0a;
--foreground: #ededed;
}
@ -34,18 +36,25 @@ body {
.ext-btn {
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
}
.ext-btn-primary {
@apply bg-extColorPrimary text-white;
}
.ext-btn-primary2 {
@apply bg-extColorPrimary2 text-white;
}
.ext-btn-primary3 {
@apply bg-extColorPrimary3 text-white;
}
.ext-btn-primary4 {
@apply bg-extColorPrimary4 text-white;
}
.ext-btn-shadow-sm {
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
}
.ext-btn-shadow-sm-primary4 {
@apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
}
}
.bg-gradient {

59
src/components/Blogs/BlogCardItem.tsx
View File

@ -19,36 +19,21 @@ export interface BlogCardItemProps {
export function BlogCardItem({ data }: BlogCardItemProps) {
return (
<div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
<div className="post-prev-3-container d-block d-sm-flex">
<div className="post-prev-3-img">
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
<div className="post-prev-3-container flex flex-col">
<div>
<a href={`/${data.slug}/`}>
<Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
<Image width={684} height={454} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
</a>
</div>
<div className="post-prev-3-intro">
<h4 className="post-prev-3-title">
<div className="px-4 py-3 h-full flex flex-col justify-between">
<h2 className="text-lg text-center">
<a href={`/${data.slug}/`}>{data.title}</a>
</h4>
<div className="post-prev-3-text">{data.contentPreview}</div>
<div className="post-prev-3-info clearfix">
{!!data?.author?.name && (
<div className="float-start">
<a href="#">
<Image
className="post-prev-3-author-img"
width={30}
height={30}
src={data.author?.img ?? "#"}
alt="Image Description"
/>
</h2>
<div className="flex justify-center mt-2">
<a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
Continue Reading
</a>
<a href="#">{data.author.name}</a>
</div>
)}
<div className={!!data?.author?.name ? "float-end" : "float-start"}>
<a href="#">{data.date}</a>
</div>
</div>
</div>
</div>
@ -58,22 +43,14 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
export function BlogCardItemSkeleton() {
return (
<div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50 animate-pulse">
<div className="post-prev-3-container d-block d-sm-flex">
<div className="post-prev-3-img">
<div className="w-56 h-64 bg-gray-300 rounded-l-lg"></div>
</div>
<div className="post-prev-3-intro flex flex-1">
<div className="flex flex-col flex-1 justify-between">
<div>
<div className="h-5 bg-gray-300 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-300 rounded w-5/6 mb-2"></div>
<div className="h-4 bg-gray-300 rounded w-2/3"></div>
<div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
</div>
<div>
<div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
</div>
<div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50 animate-pulse">
<div className="post-prev-3-container flex flex-col">
<div className="h-48 w-full bg-gray-300"></div>
<div className="px-4 py-3">
<div className="space-y-2 flex flex-col items-center">
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-full"></div>
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
</div>

2
tailwind.config.ts
View File

@ -15,6 +15,8 @@ export default {
extColorPrimary2: "var(--ext-color-primary-2)",
extColorPrimary3: "var(--ext-color-primary-3)",
extColorPrimary4: "var(--ext-color-primary-4)",
extColorPrimary5: "var(--ext-color-primary-5)",
extColorPrimary6: "var(--ext-color-primary-6)",
},
},
},