feat: add canva embed and route

apps/web/app/canva-track/[...trackIds]/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { useSearchParams } from "next/navigation";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import Image from "next/image";
+
+const Header = ({ title }: { title: string }) => (
+  <motion.div
+    className={`z-[50] flex w-full flex-col justify-between gap-2 p-6 md:flex-row`}
+    initial={{ y: 0 }}
+    animate={{ y: 0 }}
+    transition={{ duration: 0.3 }}
+  >
+    <div className="flex items-center gap-2">
+      <motion.div
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
+        className="flex justify-between gap-2"
+      >
+        <div
+          className={`border-primary/10 flex items-center gap-4 rounded-lg border bg-black/10 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out`}
+        >
+          <Link href={"/"} className="cursor-pointer items-center gap-4">
+            <Image
+              src={"https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg"}
+              alt="Logo"
+              width={200}
+              height={200}
+              className="size-8 rounded-full"
+            />
+          </Link>
+          <h4 className="flex items-center gap-2 font-medium tracking-tighter md:max-w-[50vw] md:text-lg">{title}</h4>
+        </div>
+      </motion.div>
+    </div>
+  </motion.div>
+);
+
+export default function CanvaTrack() {
+  const searchParams = useSearchParams();
+  const canvaLink = searchParams.get("canvaLink");
+  const title = searchParams.get("title");
+
+  const embedUrl = canvaLink?.includes("?embed") ? canvaLink : `${canvaLink}?embed`;
+
+  console.log({ canvaLink, embedUrl });
+
+  if (!embedUrl) {
+    return <div>No Canva presentation link provided</div>;
+  }
+
+  return (
+    <div className="flex h-screen w-full flex-col overflow-hidden">
+      <Header title={title ?? ""} />
+      <div className="w-full flex-1">
+        <div className="relative h-full w-full">
+          <iframe
+            loading="lazy"
+            className="absolute left-0 top-0 h-full w-full border-none"
+            src={embedUrl}
+            allowFullScreen={true}
+            allow="fullscreen"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/TrackCard-2.tsx

@@ -3,6 +3,7 @@ import { motion, useAnimation } from "framer-motion";
 import { Track, Problem } from "@prisma/client";
 import { TrackPreview } from "./TrackPreview";
 import { formatDistanceToNow } from "date-fns";
+import { useRouter } from "next/navigation";
 
 interface TrackCardProps extends Track {
   problems: Problem[];
@@ -15,10 +16,24 @@ interface TrackCardProps extends Track {
 }
 
 export function TrackCard2({ track }: { track: TrackCardProps }) {
+  const router = useRouter();
   const controls = useAnimation();
   const ref = useRef<HTMLDivElement | null>(null);
   const [showPreview, setShowPreview] = useState<boolean>(false);
 
+  const handleTrackClick = () => {
+    if (track.trackType === "CANVA") {
+      const searchParams = new URLSearchParams();
+      if (track.canvaLink) {
+        searchParams.set("canvaLink", track.canvaLink);
+        searchParams.set("title", track.title);
+      }
+      router.push(`/canva-track/${track.id}?${searchParams.toString()}`);
+    } else {
+      setShowPreview(true);
+    }
+  };
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -52,8 +67,8 @@ export function TrackCard2({ track }: { track: TrackCardProps }) {
         initial="hidden"
         animate={controls}
         variants={variants}
-        className="flex items-start flex-row gap-4 cursor-pointer transition-all  bg-primary/5 backdrop-blur-xl duration-300 hover:-translate-y-1 rounded-xl p-4 justify-between md:items-center"
-        onClick={() => setShowPreview(true)}
+        className="bg-primary/5 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-xl p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 md:items-center"
+        onClick={handleTrackClick}
       >
         <img src={track.image} alt={track.title} className="size-20 aspect-square object-cover rounded-xl" />
         <div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between">

apps/web/components/admin/AddTrackCard.tsx

@@ -14,6 +14,7 @@ const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
   const [hidden, setHidden] = useState(false);
   const [selectedCategory, setSelectedCategory] = useState<string[]>([]);
   const [cohort, setCohort] = useState(3);
+  const [canvaLink, setCanvaLink] = useState("");
   const { toast } = useToast();
 
   function handleFilterButton(category: string) {
@@ -26,7 +27,7 @@ const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
 
   return (
     <div>
-      <Card className="cols-span-4 p-4 m-2 w-full">
+      <Card className="cols-span-4 m-2 w-full p-4">
         <Input
           type="text"
           placeholder="Track Id"
@@ -68,7 +69,16 @@ const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
             setCohort(parseInt(event.target.value));
           }}
         />
-        <div className="flex lg:flex-row justify-evenly mx-auto py-1">
+        <Input
+          type="text"
+          placeholder="Canva Link"
+          className="my-2"
+          value={canvaLink}
+          onChange={(event) => {
+            setCanvaLink(event.target.value);
+          }}
+        />
+        <div className="mx-auto flex justify-evenly py-1 lg:flex-row">
           {categories.map((category, i) => (
             <Button
               key={i}
@@ -85,12 +95,32 @@ const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
         </Button>
         <Button
           disabled={!title || !description || !image}
-          className="w-full mt-4"
+          className="mt-4 w-full"
           onClick={async () => {
-            await createTrack({ problems: [], id, title, description, image, hidden, selectedCategory });
+            await createTrack({
+              problems: [],
+              id,
+              title,
+              description,
+              image,
+              hidden,
+              selectedCategory,
+              canvaLink,
+              trackType: canvaLink ? "CANVA" : "NOTION",
+            });
             setNewProblems((prev) => [
               ...prev,
-              { id, title, description, image, hidden, cohort, createdAt: new Date() },
+              {
+                id,
+                title,
+                description,
+                image,
+                hidden,
+                cohort,
+                createdAt: new Date(),
+                canvaLink,
+                trackType: canvaLink ? "CANVA" : "NOTION",
+              },
             ]);
             toast({
               title: "Added a Track",
@@ -107,7 +137,7 @@ const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
             <div className="grid grid-cols-6">
               <img
                 src={Track.image}
-                className="flex m-4 min-h-[130px] sm:h-[130px] min-w-[130px] sm:w-[130px] rounded-xl"
+                className="m-4 flex min-h-[130px] min-w-[130px] rounded-xl sm:h-[130px] sm:w-[130px]"
               />
               <div className="col-span-5">
                 <CardHeader>

apps/web/components/admin/EditTrackCard.tsx

@@ -20,11 +20,14 @@ const EditTrackCard = ({ Track, categories }: { Track: TrackCardProps; categorie
   const [image, setImage] = useState(Track.image);
   const [hidden, setHidden] = useState(Track.hidden);
   const [cohort, setCohort] = useState(Track.cohort);
+  const [trackType, setTrackType] = useState(Track.trackType);
+  const [canvaLink, setCanvaLink] = useState(Track.canvaLink || "");
+
   const [selectedCategory, setSelectedCategory] = useState<string[]>(Track.categories.map((item) => item.category.id));
 
   function handleEdit(id: string) {
     if (isEditing) {
-      updateTrack(id, { id, title, description, image, hidden, selectedCategory, cohort });
+      updateTrack(id, { id, title, description, image, hidden, selectedCategory, cohort, trackType, canvaLink });
       return setIsEditing(false);
     }
     setIsEditing(true);
@@ -50,7 +53,7 @@ const EditTrackCard = ({ Track, categories }: { Track: TrackCardProps; categorie
     <Card key={Track.id}>
       {!isEditing && (
         <div className="grid grid-cols-6">
-          <img src={image} className="flex m-4 min-h-[130px] sm:h-[130px] min-w-[130px] sm:w-[130px] rounded-xl" />
+          <img src={image} className="m-4 flex min-h-[130px] min-w-[130px] rounded-xl sm:h-[130px] sm:w-[130px]" />
           <div className="col-span-5">
             <CardHeader>
               <div className="flex justify-between">
@@ -96,6 +99,24 @@ const EditTrackCard = ({ Track, categories }: { Track: TrackCardProps; categorie
               <Label>Cohort</Label>
               <Input placeholder="Cohort" onChange={(e) => setCohort(Number(e.target.value))} value={cohort} />
             </CardDescription>
+            {trackType === "CANVA" && canvaLink && (
+              <CardDescription>
+                <Label>Canva Link</Label>
+                <Input
+                  placeholder="Canva Link"
+                  onChange={(e) => {
+                    if (e.target.value === "") {
+                      setCanvaLink("");
+                      setTrackType("NOTION");
+                    } else {
+                      setTrackType("CANVA");
+                      setCanvaLink(e.target.value);
+                    }
+                  }}
+                  value={canvaLink}
+                />
+              </CardDescription>
+            )}
             <CardDescription>
               {categories.map((item, i) => (
                 <Button

apps/web/components/utils.tsx

@@ -212,6 +212,8 @@ export async function createTrack(data: {
   problems: { problem: Prisma.ProblemCreateManyInput; sortingOrder: number }[];
   hidden: boolean;
   cohort?: number;
+  canvaLink?: string;
+  trackType: "NOTION" | "CANVA";
 }) {
   try {
     await db.problem.createMany({
@@ -225,6 +227,8 @@ export async function createTrack(data: {
         description: data.description,
         image: data.image,
         cohort: data.cohort,
+        canvaLink: data.canvaLink,
+        trackType: data.trackType,
         hidden: data.hidden,
         problems: {
           createMany: {
@@ -264,6 +268,8 @@ export async function updateTrack(
     problems?: { problem: Prisma.ProblemCreateManyInput; sortingOrder: number }[];
     hidden: boolean;
     cohort?: number;
+    canvaLink?: string;
+    trackType: "NOTION" | "CANVA";
   }
 ) {
   try {
@@ -278,6 +284,8 @@ export async function updateTrack(
         image: data.image,
         hidden: data.hidden,
         cohort: data.cohort,
+        canvaLink: data.canvaLink,
+        trackType: data.trackType,
       },
     });
     await db.trackCategory.deleteMany({

packages/db/prisma/migrations/20241101231656_add_canva/migration.sql

@@ -0,0 +1,6 @@
+-- CreateEnum
+CREATE TYPE "TrackType" AS ENUM ('NOTION', 'CANVA');
+
+-- AlterTable
+ALTER TABLE "Track" ADD COLUMN     "canvaLink" TEXT,
+ADD COLUMN     "trackType" "TrackType" NOT NULL DEFAULT 'NOTION';

packages/db/prisma/schema.prisma

@@ -68,10 +68,12 @@ model Track {
   image       String
   categories  TrackCategory[] // This replaces 'category Categories[]'
   problems    TrackProblems[]
-  inSearch    Boolean         @default(false)
-  hidden      Boolean         @default(false)
-  cohort      Int             @default(0)
-  createdAt   DateTime        @default(now())
+  canvaLink   String?
+  trackType   TrackType      @default(NOTION)
+  inSearch    Boolean        @default(false)
+  hidden      Boolean        @default(false)
+  cohort      Int            @default(0)
+  createdAt   DateTime       @default(now())
 }
 
 model Categories {
@@ -133,4 +135,9 @@ model QuizScore {
   problem       Problem  @relation(fields: [problemId], references: [id])
   problemId     String
   createdAt     DateTime @default(now())
-}
+}
+
+enum TrackType {
+  NOTION
+  CANVA
+}