Implement resource card

src/components/layouts/SharingCard/SharingCardBody.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
 
 export const SharingCardBody = ({ children }: PropsWithChildren) => {
-  return <div className="space-y-2 rounded-sm bg-overlay p-3">{children}</div>;
+  return <div className="space-y-2">{children}</div>;
 };

src/components/layouts/SharingCard/SharingCardFooter.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export const SharingCardFooter = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex justify-between space-x-4 pt-2 text-xs text-icon">
+      {children}
+    </div>
+  );
+};

src/components/layouts/SharingCard/SharingCardHeader.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export const SharingCardHeader = ({ children }: PropsWithChildren) => {
   return <header className="flex justify-between">{children}</header>;

src/components/layouts/SharingCard/_index.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { SharingCardLayout } from "./_layout";
 import { SharingCardHeader } from "./SharingCardHeader";
 import { SharingCardBody } from "./SharingCardBody";
-
+import { SharingCardFooter } from "./SharingCardFooter";
+
 type Props = {
   header: React.ReactNode;
   content: React.ReactNode;
@@ -13,6 +14,7 @@ export const SharingCard = ({ header, content }: Props) => {
     <SharingCardLayout>
       <SharingCardHeader>{header}</SharingCardHeader>
       <SharingCardBody>{content}</SharingCardBody>
+      <SharingCardFooter>{footer}</SharingCardFooter>
     </SharingCardLayout>
   );
 };

src/components/layouts/SharingCard/_layout.tsx

@@ -1,8 +1,17 @@
-import type { PropsWithChildren } from "react";
+import { cn } from "@/lib/utils";
+type Props = {
+  className?: string;
+  children: React.ReactNode;
+};
 
-export const SharingCardLayout = ({ children }: PropsWithChildren) => {
+export const SharingCardLayout = ({ className, children }: Props) => {
   return (
-    <article className="flex w-full max-w-[450px] flex-col justify-between space-y-4 overflow-hidden rounded-md border border-card bg-[#0D1117] p-2 shadow md:max-w-none">
+    <article
+      className={cn(
+        "flex w-full max-w-[450px] flex-col justify-between space-y-4 overflow-hidden rounded-md border border-card bg-[#0D1117] p-2 shadow md:max-w-none",
+        className,
+      )}
+    >
       {children}
     </article>
   );

src/config/types/prisma.type.ts

@@ -4,6 +4,10 @@ export type Repository = Prisma.RepositoryGetPayload<{
   include: { createdBy: true; language: true; comments: true; topics: true };
 }>;
 
+export type Resource = Prisma.ResourceGetPayload<{
+  include: { createdBy: true };
+}>;
+
 export type User = Prisma.UserGetPayload<{
   include: { likes: true };
 }>;

src/modules/repositories/components/RepositoryCard/RepositoryCardFooter.tsx

@@ -19,7 +19,7 @@ export const RepositoryCardFooter = ({
   const { user, likes } = useRepositoriesContext();
 
   return (
-    <div className="flex justify-between space-x-4 pt-2 text-xs text-icon">
+    <>
       <div className="flex space-x-4">
         <RepositoryCardLanguage repository={repository} />
         <RepositoryCardStars
@@ -33,6 +33,6 @@ export const RepositoryCardFooter = ({
         <RepositoryCardComment repository={repository} />
         <RepositoryCardLike user={user} repository={repository} likes={likes} />
       </div>
-    </div>
+    </>
   );
 };

src/modules/repositories/components/RepositoryCard/_index.tsx

@@ -17,16 +17,18 @@ export const RepositoryCard = ({
   return (
     <SharingCard
       header={<RepositoryCardHeader repository={repository} />}
-      content={
+      body={
         <>
           <RepositoryCardDescription repository={repository} />
           <RepositoryCardTopics repository={repository} />
-          <RepositoryCardFooter
-            repository={repository}
-            repositoriesAlreadyStarred={repositoriesAlreadyStarred}
-          />
         </>
       }
+      footer={
+        <RepositoryCardFooter
+          repository={repository}
+          repositoriesAlreadyStarred={repositoriesAlreadyStarred}
+        />
+      }
     />
   );
 };

src/modules/resources/components/ResourceCard/ResourceCardDescription.tsx

@@ -0,0 +1,16 @@
+import { LogIcon } from "@primer/octicons-react";
+
+type Props = {
+  description: string | null;
+};
+
+export const ResourceCardDescription = ({ description }: Props) => {
+  if (!description) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <LogIcon className="h-4 w-4" />
+      <p className="text-sm">{description}</p>
+    </div>
+  );
+};

src/modules/resources/components/ResourceCard/ResourceCardFooter.tsx

@@ -0,0 +1,14 @@
+import { ResourceCardType } from "./ResourceCardType";
+import type { Resource } from "@/config/types/prisma.type";
+
+type Props = {
+  resource: Resource;
+};
+
+export const ResourceCardFooter = ({ resource }: Props) => {
+  return (
+    <>
+      <ResourceCardType type={resource.type} />
+    </>
+  );
+};

src/modules/resources/components/ResourceCard/ResourceCardHeader.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { ProfileAvatar } from "@/components/layouts/ProfileAvatar";
+import { URL } from "@/config/constants";
+import type { Resource } from "@/config/types/prisma.type";
+
+type Props = {
+  resource: Resource;
+};
+
+export const ResourceCardHeader = ({ resource }: Props) => {
+  console.log("ResourceCardHeader", resource.createdBy);
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <ProfileAvatar
+          pictureUrl={`${resource.createdBy.image!}?size=40`}
+          alt={resource.createdBy.username! ?? resource.createdBy.name!}
+        />
+        <span className="text-xs">
+          Published by{" "}
+          <Link
+            href={`${URL.PROFILE}/${resource.createdBy.id}?username=${resource.createdBy.username}`}
+            className="text-blue underline"
+          >
+            {resource.createdBy.username ?? resource.createdBy.name}
+          </Link>
+        </span>
+      </div>
+    </>
+  );
+};

src/modules/resources/components/ResourceCard/ResourceCardType.tsx

@@ -0,0 +1,7 @@
+type Props = {
+  type: string;
+};
+
+export const ResourceCardType = ({ type }: Props) => {
+  return <span className=" font-semibold uppercase">{type}</span>;
+};

src/modules/resources/components/ResourceCard/ResourceCardUrl.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+import React from "react";
+import { LinkIcon } from "@primer/octicons-react";
+
+type Props = {
+  url: string;
+};
+
+export const ResourceCardUrl = ({ url }: Props) => {
+  return (
+    <div className="flex items-center gap-2 hover:text-blue hover:underline">
+      <LinkIcon className="h-4 w-4" />
+      <Link className="truncate text-sm " href={url} target="_blank">
+        {url}
+      </Link>
+    </div>
+  );
+};

src/modules/resources/components/ResourceCard/_index.tsx

@@ -1,10 +1,28 @@
 import { SharingCard } from "@/components/layouts/SharingCard/_index";
-import type { Resource } from "@prisma/client";
+import { ResourceCardHeader } from "./ResourceCardHeader";
+import { ResourceCardUrl } from "./ResourceCardUrl";
+import { ResourceCardDescription } from "./ResourceCardDescription";
+import type { Resource } from "@/config/types/prisma.type";
+import { ResourceCardFooter } from "./ResourceCardFooter";
 
 type Props = {
   resource: Resource;
 };
 
 export const ResourceCard = ({ resource }: Props) => {
-  return <SharingCard header={resource.url} content={resource.description} />;
+  const { url, description } = resource;
+
+  return (
+    <SharingCard
+      className="w-full max-w-md"
+      header={<ResourceCardHeader resource={resource} />}
+      body={
+        <>
+          <ResourceCardUrl url={url} />
+          <ResourceCardDescription description={description} />
+        </>
+      }
+      footer={<ResourceCardFooter resource={resource} />}
+    />
+  );
 };

src/services/resource.service.ts

@@ -71,7 +71,9 @@ export class RessourceService {
     const resources = await db.resource.findMany({
       where,
       orderBy,
-
+      include: {
+        createdBy: true,
+      },
       take: limit,
       skip: offset,
       cursor: cursor ? { id: cursor } : undefined,