this is your question ?

the question is not clear here can you explain your question more ?

ok ill start little by little

i have this from a random portfolio project it goes well with my template :

as you can see it uses upstash radis and conentlayer

ahhh i see you want to use this style but you dont have redis and other library in it ?

just remove the import and you will see waht to remove

yea i did but everything needs to be removed almost

ok so i have this component working well

import Link from "next/link";
import { HiPencilAlt } from "react-icons/hi";
import RemoveBtn from "./RemoveBtn";

const getProjects = async() => {
try{
const res = await fetch('http://localhost:3000/api/projects', {
cache: 'no-store',
});

if (!res.ok) {
throw new Error("Failed to fetch projects");
}
return res.json();

} catch(error) {
console.log("Error loading projects: ", error);
return { projects: [] }; // Return an empty array in case of error
}
}

export default async function ProjectsList() {
const { projects } = await getProjects();
return(
#Unknown Channel
{projects.map((p: any) => (
<div className="p-4 border border-slate-300 my-3 flex justify-between gap-5 items-start">
<div>
<h2 className="font-bold text-2xl">{p.title}</h2>
<div>{p.description}</div>
</div>

<div className="flex gap-2">
<RemoveBtn id={p._id} />
<Link href={/test/editProject/${p._id}}>
<HiPencilAlt size={24} />
</Link>
</div>
</div>
))}
</>
);
}

is it possible to adabt this into that?

i mean you can copy parts and replace the redis based on your data

but it is possible

so like you only want this card

 <Card>
            <Link href={`/projects/${featured.slug}`}>
              <article className="relative w-full h-full p-4 md:p-8">
                <div className="flex items-center justify-between gap-2">
                  <div className="text-xs text-zinc-100">
                    {featured.date ? (
                      <time dateTime={new Date(featured.date).toISOString()}>
                        {Intl.DateTimeFormat(undefined, {
                          dateStyle: "medium",
                        }).format(new Date(featured.date))}
                      </time>
                    ) : (
                      <span>SOON</span>
                    )}
                  </div>
                  <span className="flex items-center gap-1 text-xs text-zinc-500">
                    <Eye className="w-4 h-4" />{" "}
                    {Intl.NumberFormat("en-US", { notation: "compact" }).format(
                      views[featured.slug] ?? 0,
                    )}
                  </span>
                </div>

                <h2
                  id="featured-post"
                  className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
                >
                  {featured.title}
                </h2>
                <p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
                  {featured.description}
                </p>
                <div className="absolute bottom-4 md:bottom-8">
                  <p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
                    Read more <span aria-hidden="true">&rarr;</span>
                  </p>
                </div>
              </article>
            </Link>
          </Card>

then just get this card

remove this {featured.title} and replace it with data from your api

same with other things

what about these : const views = (
await redis.mget<number[]>(
...allProjects.map((p) => ["pageviews", "projects", p.slug].join(":")),
)
).reduce((acc, v, i) => {
acc[allProjects[i].slug] = v ?? 0;
return acc;
}, {} as Record<string, number>);

const featured = allProjects.find((project) => project.slug === "unkey")!;
const top2 = allProjects.find((project) => project.slug === "planetfall")!;
const top3 = allProjects.find((project) => project.slug === "highstorm")!;
const sorted = allProjects
.filter((p) => p.published)
.filter(
(project) =>
project.slug !== featured.slug &&
project.slug !== top2.slug &&
project.slug !== top3.slug,
)
.sort(
(a, b) =>
new Date(b.date ?? Number.POSITIVE_INFINITY).getTime() -
new Date(a.date ?? Number.POSITIVE_INFINITY).getTime(),
);

that are just data processing

it really depends on your data how you stracture it based on what your api return. for then theu do filtering and sorting for project

so it is not relevant to design

i mean it is relevant but ony to display informatiuon

lets say you have extra text for project information then add that

you can remove other parts like data display part which i said {featured.title} something like this since this is not relivant to design only information

do i keep the article compoenent? import type { Project } from "@/.contentlayer/generated";
import Link from "next/link";
import { Eye, View } from "lucide-react";

type Props = {
project: Project;
views: number;
};

export const Article: React.FC<Props> = ({ project, views }) => {
return (
<Link href={/projects/${project.slug}}>
<article className="p-4 md:p-8">
<div className="flex justify-between gap-2 items-center">
<span className="text-xs duration-1000 text-zinc-200 group-hover:text-white group-hover:border-zinc-200 drop-shadow-orange">
{project.date ? (
<time dateTime={new Date(project.date).toISOString()}>
{Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(
new Date(project.date),
)}
</time>
) : (
<span>SOON</span>
)}
</span>
<span className="text-zinc-500 text-xs flex items-center gap-1">
<Eye className="w-4 h-4" />{" "}
{Intl.NumberFormat("en-US", { notation: "compact" }).format(views)}
</span>
</div>
<h2 className="z-20 text-xl font-medium duration-1000 lg:text-3xl text-zinc-200 group-hover:text-white font-display">
{project.title}
</h2>
<p className="z-20 mt-4 text-sm duration-1000 text-zinc-400 group-hover:text-zinc-200">
{project.description}
</p>
</article>
</Link>
);
};

but yea be mindfull that you will find other things in here that displays data but still part of the design

its up to you man on how you want to keep your design .

so complicated sometimes its better to do smth from scratch lmao

ty for ur help ill see what i can do and get back to u if u dun mind 🙂

as i said it is just the data that you want to remove so in here it is the {project.description} {project.title}
{project.date ? (<time dateTime={new Date(project.date).toISOString()}>{Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(project.date),)}</time>) : (<span>SOON</span>)} this part is a loop so if you want to have this part you make sure you have a loop but if you dont want it you can just get the proper component like the <span>SOON</span> or <time dateTime={new Date(project.date).toISOString()}></time>

sure if i see the notif why not

https://ejayz.uk/ hey this is my portfolio i just copy component from a ui library called daisy UII

you copy design . then modify it

i worked with daisyUI on nuxt projects before

looks cool tbh

sure man ty alot ill get back here in an hour or 2 and update u if it isn't solved ty again ❤️

@Japanese jack mackerel for archival purposes please avoid deleting the original question unless strictly necessary, such as when the question contains secrets (that you should have never posted in the first place)

Alright won't happen 🙂