chore: update new models (#128)

src/pages/index/+data.ts

@@ -0,0 +1,253 @@
+import type { CardCraftProps } from "./components/HomeHero/Portfolio/CardCraft";
+
+export { data };
+export type HomeData = Awaited<ReturnType<typeof data>>;
+
+const fakeShowcases: CardCraftProps[] = [
+  {
+    id: "1",
+    title: "Amazing Project",
+    description: "This is a description of an amazing project.",
+    isPublish: true,
+    file: {
+      contentType: "image/jpeg",
+      fileName: "project-image.png",
+      fileUrl: "/src/pages/index/assets/images/portfolio/1.jpg",
+      metadata: {
+        width: 800,
+        height: 600,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/project",
+    authorName: "John Doe",
+    actionText: "View Project",
+    createdAt: "2023-10-01T12:00:00Z",
+  },
+  {
+    id: "2",
+    title: "Innovative Design",
+    description: "This project showcases an innovative design.",
+    isPublish: false,
+    file: {
+      contentType: "image/jpeg",
+      fileName: "design-image.jpg",
+      fileUrl: "/design-image.jpg",
+      metadata: {
+        width: 1024,
+        height: 768,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/design",
+    authorName: "Jane Smith",
+    actionText: "Explore Design",
+    createdAt: "2023-09-15T08:30:00Z",
+  },
+  {
+    id: "3",
+    title: "Tech Solution",
+    description: "A cutting-edge tech solution for modern problems.",
+    isPublish: true,
+    file: {
+      contentType: "video/mp4",
+      fileName: "solution-video.mp4",
+      fileUrl: "/solution-video.mp4",
+      metadata: {
+        width: 1920,
+        height: 1080,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/solution",
+    authorName: "Alice Johnson",
+    actionText: "Watch Video",
+    createdAt: "2023-08-20T14:45:00Z",
+  },
+  {
+    id: "4",
+    title: "Creative Artwork",
+    description: "A beautiful piece of creative artwork.",
+    isPublish: true,
+    file: {
+      contentType: "video/mp4",
+      fileName: "artwork.gif",
+      fileUrl: "/artwork.gif",
+      metadata: {
+        width: 500,
+        height: 500,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/artwork",
+    authorName: "Bob Brown",
+    actionText: "View Artwork",
+    createdAt: "2023-07-10T10:00:00Z",
+  },
+  {
+    id: "5",
+    title: "Innovative App",
+    description: "An innovative app that solves many problems.",
+    isPublish: false,
+    file: {
+      fileName: "app-icon.svg",
+      fileUrl: "/app-icon.svg",
+      metadata: {
+        type: "image/jpeg",
+        width: 600,
+        height: 400,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/app",
+    authorName: "Charlie Davis",
+    actionText: "Download App",
+    createdAt: "2023-06-25T09:15:00Z",
+  },
+  {
+    id: "6",
+    title: "Tech Conference",
+    description: "Highlights from the latest tech conference.",
+    isPublish: true,
+    file: {
+      contentType: "video/mp4",
+      fileName: "conference-video.mp4",
+      fileUrl: "/conference-video.mp4",
+      metadata: {
+        width: 1280,
+        height: 720,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/conference",
+    authorName: "Diana Evans",
+    actionText: "Watch Highlights",
+    createdAt: "2023-05-30T11:45:00Z",
+  },
+  {
+    id: "7",
+    title: "Photography Portfolio",
+    description: "A stunning photography portfolio.",
+    isPublish: true,
+    file: {
+      contentType: "image/jpeg",
+      fileName: "portfolio.jpg",
+      fileUrl: "/portfolio.jpg",
+      metadata: {
+        width: 1200,
+        height: 800,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/portfolio",
+    authorName: "Eve Foster",
+    actionText: "View Portfolio",
+    createdAt: "2023-04-20T13:30:00Z",
+  },
+  {
+    id: "8",
+    title: "Music Album",
+    description: "A new music album release.",
+    isPublish: false,
+    file: {
+      contentType: "video/mp4",
+      fileUrl: "/album.mp3",
+      metadata: {
+        fileName: "album.mp3",
+        width: 0,
+        height: 0,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/album",
+    authorName: "Frank Green",
+    actionText: "Listen Now",
+    createdAt: "2023-03-15T07:00:00Z",
+  },
+  {
+    id: "9",
+    title: "Art Exhibition",
+    description: "Details about the upcoming art exhibition.",
+    isPublish: true,
+    file: {
+      contentType: "image/png",
+      fileName: "exhibition.png",
+      fileUrl: "/exhibition.png",
+      metadata: {
+        width: 1024,
+        height: 768,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/exhibition",
+    authorName: "Grace Harris",
+    actionText: "Learn More",
+    createdAt: "2023-02-10T16:00:00Z",
+  },
+  {
+    id: "10",
+    title: "Science Fair",
+    description: "Highlights from the annual science fair.",
+    isPublish: true,
+    file: {
+      contentType: "video/mp4",
+      fileName: "science-fair.mp4",
+      fileUrl: "/science-fair.mp4",
+      metadata: {
+        width: 1920,
+        height: 1080,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/science-fair",
+    authorName: "Henry Irving",
+    actionText: "Watch Highlights",
+    createdAt: "2023-01-05T12:00:00Z",
+  },
+  {
+    id: "11",
+    title: "Cooking Show",
+    description: "A new episode of the popular cooking show.",
+    isPublish: false,
+    file: {
+      contentType: "video/mp4",
+      fileName: "cooking-show.mp4",
+      fileUrl: "/cooking-show.mp4",
+      metadata: {
+        width: 1280,
+        height: 720,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/cooking-show",
+    authorName: "Ivy Johnson",
+    actionText: "Watch Episode",
+    createdAt: "2022-12-25T18:00:00Z",
+  },
+  {
+    id: "12",
+    title: "Fitness Program",
+    description: "A comprehensive fitness program.",
+    isPublish: true,
+    file: {
+      contentType: "image/jpeg",
+      fileName: "fitness-program.jpg",
+      fileUrl: "/fitness-program.jpg",
+      metadata: {
+        width: 800,
+        height: 600,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      },
+    },
+    link: "https://example.com/fitness-program",
+    authorName: "Jack King",
+    actionText: "Join Now",
+    createdAt: "2022-11-15T14:00:00Z",
+  },
+];
+
+async function data() {
+  return {
+    showcases: fakeShowcases,
+  };
+}

src/pages/index/components/HomeBuildFor/index.tsx

@@ -2,10 +2,10 @@ import * as t from "$paraglide/messages.js";
 import type { FC } from "react";
 import ProLabel from "./ProLabel";
 
-import HomeCreator from "../../assets/images/Creator.png";
-import HomeDesigner from "../../assets/images/Designer.png";
-import HomeDeveloper from "../../assets/images/Developer.png";
-import HomeManager from "../../assets/images/Manager.png";
+import HomeCreator from "#root/pages/index/assets/images/Creator.png";
+import HomeDesigner from "#root/pages/index/assets/images/Designer.png";
+import HomeDeveloper from "#root/pages/index/assets/images/Developer.png";
+import HomeManager from "#root/pages/index/assets/images/Manager.png";
 
 type Props = {};
 

src/pages/index/components/HomeHero/Portfolio/CardCraft.tsx

@@ -1,7 +1,8 @@
+import type { Collaborator, FileModel } from "@techmely/starly-models";
 import type { FC } from "react";
 import Link from "#root/shared/components/Link";
 
-type Props = {
+export type CardCraftProps = {
   id: string;
   isPublish: boolean;
   link?: string;
@@ -10,41 +11,52 @@ type Props = {
   /**
    * Can be a link of image, gift or video
    */
-  assetLink: string;
+  file: Partial<FileModel>;
   actionText?: string;
   createdAt: string;
+  authorName?: string;
+  collaborators?: Collaborator[];
 };
 
-const CardCraft: FC<Props> = (props) => {
+const CardCraft: FC<CardCraftProps> = (props) => {
   return (
     <li data-testid={`p-item-${props.id}`}>
       {props.isPublish ? <PublicCraft {...props} /> : <PrivateCraft {...props} />}
     </li>
   );
 };
 
-const PublicCraft: FC<Props> = ({
+const PublicCraft: FC<CardCraftProps> = ({
   id,
   title,
   description,
   link,
   actionText,
-  assetLink,
+  file,
+  authorName,
   createdAt,
 }) => {
   return (
-    <Link href={assetLink} aria-label={title}>
-      Public
+    <Link href={link} aria-label={title}>
+      <div className="relative overflow-hidden rounded-lg">
+        {/* <img src={file} alt={title} className="relative" /> */}
+        <div className="absolute bottom-0 z-[1] w-full flex justify-between items-center">
+          <h3>{title}</h3>
+          {/* <p>{description}</p> */}
+          {authorName ? <p>{authorName}</p> : <time>{createdAt}</time>}
+        </div>
+      </div>
     </Link>
   );
 };
 
-const PrivateCraft: FC<Props> = ({
+const PrivateCraft: FC<CardCraftProps> = ({
+  id,
   title,
   description,
   link,
   actionText,
-  assetLink,
+  file,
   createdAt,
 }) => {
   return <div aria-label={title}>Private</div>;

src/pages/index/components/HomeHero/Portfolio/PortfolioCreative.tsx

@@ -1,8 +1,12 @@
+import { useData } from "@techmely/vike-react";
 import type { FC } from "react";
+import type { HomeData } from "#root/pages/index/+data";
 
 type Props = {};
 
 const PortfolioCreative: FC<Props> = (props) => {
+  const { showcases } = useData<HomeData>();
+
   return (
     <div className="flex gap-2 w-full">
       <ul className="basis-1/3">Hello</ul>