{"id":14981558,"url":"https://github.com/adrianhajdin/figma_clone","last_synced_at":"2025-05-16T08:05:53.081Z","repository":{"id":220494223,"uuid":"751788776","full_name":"adrianhajdin/figma_clone","owner":"adrianhajdin","description":"Figma Clone using Next.js, Fabric.js and Liveblocks in TypeScript","archived":false,"fork":false,"pushed_at":"2024-04-04T08:16:22.000Z","size":268,"stargazers_count":1125,"open_issues_count":16,"forks_count":301,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-08T20:18:07.855Z","etag":null,"topics":["figma","liveblocks","nextjs14"],"latest_commit_sha":null,"homepage":"https://jsmastery.pro","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adrianhajdin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-02T10:30:04.000Z","updated_at":"2025-04-03T06:47:48.000Z","dependencies_parsed_at":"2024-09-24T07:02:01.681Z","dependency_job_id":null,"html_url":"https://github.com/adrianhajdin/figma_clone","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"b8ebdb7ccbaf1a6d4900e3b76e9fc3c996e74ede"},"previous_names":["adrianhajdin/figma_clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhajdin%2Ffigma_clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhajdin%2Ffigma_clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhajdin%2Ffigma_clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhajdin%2Ffigma_clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrianhajdin","download_url":"https://codeload.github.com/adrianhajdin/figma_clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","liveblocks","nextjs14"],"created_at":"2024-09-24T14:03:49.728Z","updated_at":"2025-05-16T08:05:48.071Z","avatar_url":"https://github.com/adrianhajdin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","App"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://youtu.be/oKIThIihv60\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://github.com/JavaScript-Mastery-Pro/figma-ts/assets/151519281/e03dc22d-0f45-464b-9dc3-f01f07906bee\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-TypeScript-black?style=for-the-badge\u0026logoColor=white\u0026logo=typescript\u0026color=3178C6\" alt=\"typescript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Next_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=nextdotjs\u0026color=000000\" alt=\"nextdotjs\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eReal Time Figma Clone\u003c/h3\u003e\n\n   \u003cdiv align=\"center\"\u003e\n     Build this project step by step with our detailed tutorial on \u003ca href=\"https://www.youtube.com/@javascriptmastery/videos\" target=\"_blank\"\u003e\u003cb\u003eJavaScript Mastery\u003c/b\u003e\u003c/a\u003e YouTube. Join the JSM family!\n    \u003c/div\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets](#snippets)\n6. 🔗 [Links](#links)\n7. 🚀 [More](#more)\n\n## 🚨 Tutorial\n\nThis repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, \u003ca href=\"https://www.youtube.com/@javascriptmastery/videos\" target=\"_blank\"\u003e\u003cb\u003eJavaScript Mastery\u003c/b\u003e\u003c/a\u003e. \n\nIf you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!\n\n\u003ca href=\"https://youtu.be/oKIThIihv60\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/1736fca5-a031-4854-8c09-bc110e3bc16d\" /\u003e\u003c/a\u003e\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nA minimalistic Figma clone to show how to add real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using fabric.js.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.\n\n\u003ca href=\"https://discord.com/invite/n6EdbFJ\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e\" /\u003e\u003c/a\u003e\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Next.js\n- TypeScript\n- Liveblocks\n- Fabric.js\n- Shadcn\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Multi Cursors, Cursor Chat, and Reactions**: Allows multiple users to collaborate simultaneously by showing individual cursors, enabling real-time chat, and reactions for interactive communication.\n\n👉 **Active Users**: Displays a list of currently active users in the collaborative environment, providing visibility into who is currently engaged.\n\n👉 **Comment Bubbles**: Enables users to attach comments to specific elements on the canvas, fostering communication and feedback on design components.\n\n👉 **Creating Different Shapes**: Provides tools for users to generate a variety of shapes on the canvas, allowing for diverse design elements\n\n👉 **Uploading Images**: Import images onto the canvas, expanding the range of visual content in the design\n\n👉 **Customization**: Allows users to adjust the properties of design elements, offering flexibility in customizing and fine-tuning visual components\n\n👉 **Freeform Drawing**: Enables users to draw freely on the canvas, promoting artistic expression and creative design.\n\n👉 **Undo/Redo**: Provides the ability to reverse (undo) or restore (redo) previous actions, offering flexibility in design decision-making\n\n👉 **Keyboard Actions**: Allows users to utilize keyboard shortcuts for various actions, including copying, pasting, deleting, and triggering shortcuts for features like opening cursor chat, reactions, and more, enhancing efficiency and accessibility.\n\n👉 **History**: Review the chronological history of actions and changes made on the canvas, aiding in project management and version control.\n\n👉 **Deleting, Scaling, Moving, Clearing, Exporting Canvas**: Offers a range of functions for managing design elements, including deletion, scaling, moving, clearing the canvas, and exporting the final design for external use.\n\nand many more, including code architecture, advanced react hooks, and reusability \n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/JavaScript-Mastery-Pro/figma-ts.git\ncd figma-ts\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env.local` in the root of your project and add the following content:\n\n```env\nNEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=\n```\n\nReplace the placeholder values with your actual Liveblocks credentials. You can obtain these credentials by signing up on the [Liveblocks website](https://liveblocks.io).\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n### Styles\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nimport type { Config } from \"tailwindcss\";\n\nconst config = {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{ts,tsx}\",\n    \"./components/**/*.{ts,tsx}\",\n    \"./app/**/*.{ts,tsx}\",\n    \"./src/**/*.{ts,tsx}\",\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        primary: {\n          black: \"#14181F\",\n          green: \"#56FFA6\",\n          grey: {\n            100: \"#2B303B\",\n            200: \"#202731\",\n            300: \"#C4D3ED\",\n          },\n        },\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n\nexport default config;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eapp/globals.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import \"@liveblocks/react-comments/styles.css\";\n\n* {\n  font-family:\n    work sans,\n    sans-serif;\n}\n\n@layer utilities {\n  .no-ring {\n    @apply outline-none ring-0 ring-offset-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0 !important;\n  }\n\n  .input-ring {\n    @apply h-8 rounded-none border-none  bg-transparent outline-none ring-offset-0 focus:ring-1  focus:ring-primary-green focus:ring-offset-0 focus-visible:ring-offset-0 !important;\n  }\n\n  .right-menu-content {\n    @apply flex w-80 flex-col gap-y-1 border-none bg-primary-black py-4 text-white !important;\n  }\n\n  .right-menu-item {\n    @apply flex justify-between px-3 py-2 hover:bg-primary-grey-200 !important;\n  }\n}\n```\n\n\u003c/details\u003e\n\n### Overlay Comments\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eNewThread\u003c/code\u003e\u003c/summary\u003e\n\n```tsx\n\"use client\";\n\nimport {\n  FormEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as Portal from \"@radix-ui/react-portal\";\nimport { ComposerSubmitComment } from \"@liveblocks/react-comments/primitives\";\n\nimport { useCreateThread } from \"@/liveblocks.config\";\nimport { useMaxZIndex } from \"@/lib/useMaxZIndex\";\n\nimport PinnedComposer from \"./PinnedComposer\";\nimport NewThreadCursor from \"./NewThreadCursor\";\n\ntype ComposerCoords = null | { x: number; y: number };\n\ntype Props = {\n  children: ReactNode;\n};\n\nexport const NewThread = ({ children }: Props) =\u003e {\n  // set state to track if we're placing a new comment or not\n  const [creatingCommentState, setCreatingCommentState] = useState\u003c\n    \"placing\" | \"placed\" | \"complete\"\n  \u003e(\"complete\");\n\n  /**\n   * We're using the useCreateThread hook to create a new thread.\n   *\n   * useCreateThread: https://liveblocks.io/docs/api-reference/liveblocks-react#useCreateThread\n   */\n  const createThread = useCreateThread();\n\n  // get the max z-index of a thread\n  const maxZIndex = useMaxZIndex();\n\n  // set state to track the coordinates of the composer (liveblocks comment editor)\n  const [composerCoords, setComposerCoords] = useState\u003cComposerCoords\u003e(null);\n\n  // set state to track the last pointer event\n  const lastPointerEvent = useRef\u003cPointerEvent\u003e();\n\n  // set state to track if user is allowed to use the composer\n  const [allowUseComposer, setAllowUseComposer] = useState(false);\n  const allowComposerRef = useRef(allowUseComposer);\n  allowComposerRef.current = allowUseComposer;\n\n  useEffect(() =\u003e {\n    // If composer is already placed, don't do anything\n    if (creatingCommentState === \"complete\") {\n      return;\n    }\n\n    // Place a composer on the screen\n    const newComment = (e: MouseEvent) =\u003e {\n      e.preventDefault();\n\n      // If already placed, click outside to close composer\n      if (creatingCommentState === \"placed\") {\n        // check if the click event is on/inside the composer\n        const isClickOnComposer = ((e as any)._savedComposedPath = e\n          .composedPath()\n          .some((el: any) =\u003e {\n            return el.classList?.contains(\"lb-composer-editor-actions\");\n          }));\n\n        // if click is inisde/on composer, don't do anything\n        if (isClickOnComposer) {\n          return;\n        }\n\n        // if click is outside composer, close composer\n        if (!isClickOnComposer) {\n          setCreatingCommentState(\"complete\");\n          return;\n        }\n      }\n\n      // First click sets composer down\n      setCreatingCommentState(\"placed\");\n      setComposerCoords({\n        x: e.clientX,\n        y: e.clientY,\n      });\n    };\n\n    document.documentElement.addEventListener(\"click\", newComment);\n\n    return () =\u003e {\n      document.documentElement.removeEventListener(\"click\", newComment);\n    };\n  }, [creatingCommentState]);\n\n  useEffect(() =\u003e {\n    // If dragging composer, update position\n    const handlePointerMove = (e: PointerEvent) =\u003e {\n      // Prevents issue with composedPath getting removed\n      (e as any)._savedComposedPath = e.composedPath();\n      lastPointerEvent.current = e;\n    };\n\n    document.documentElement.addEventListener(\"pointermove\", handlePointerMove);\n\n    return () =\u003e {\n      document.documentElement.removeEventListener(\n        \"pointermove\",\n        handlePointerMove\n      );\n    };\n  }, []);\n\n  // Set pointer event from last click on body for use later\n  useEffect(() =\u003e {\n    if (creatingCommentState !== \"placing\") {\n      return;\n    }\n\n    const handlePointerDown = (e: PointerEvent) =\u003e {\n      // if composer is already placed, don't do anything\n      if (allowComposerRef.current) {\n        return;\n      }\n\n      // Prevents issue with composedPath getting removed\n      (e as any)._savedComposedPath = e.composedPath();\n      lastPointerEvent.current = e;\n      setAllowUseComposer(true);\n    };\n\n    // Right click to cancel placing\n    const handleContextMenu = (e: Event) =\u003e {\n      if (creatingCommentState === \"placing\") {\n        e.preventDefault();\n        setCreatingCommentState(\"complete\");\n      }\n    };\n\n    document.documentElement.addEventListener(\"pointerdown\", handlePointerDown);\n    document.documentElement.addEventListener(\"contextmenu\", handleContextMenu);\n\n    return () =\u003e {\n      document.documentElement.removeEventListener(\n        \"pointerdown\",\n        handlePointerDown\n      );\n      document.documentElement.removeEventListener(\n        \"contextmenu\",\n        handleContextMenu\n      );\n    };\n  }, [creatingCommentState]);\n\n  // On composer submit, create thread and reset state\n  const handleComposerSubmit = useCallback(\n    ({ body }: ComposerSubmitComment, event: FormEvent\u003cHTMLFormElement\u003e) =\u003e {\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Get your canvas element\n      const overlayPanel = document.querySelector(\"#canvas\");\n\n      // if there's no composer coords or last pointer event, meaning the user hasn't clicked yet, don't do anything\n      if (!composerCoords || !lastPointerEvent.current || !overlayPanel) {\n        return;\n      }\n\n      // Set coords relative to the top left of your canvas\n      const { top, left } = overlayPanel.getBoundingClientRect();\n      const x = composerCoords.x - left;\n      const y = composerCoords.y - top;\n\n      // create a new thread with the composer coords and cursor selectors\n      createThread({\n        body,\n        metadata: {\n          x,\n          y,\n          resolved: false,\n          zIndex: maxZIndex + 1,\n        },\n      });\n\n      setComposerCoords(null);\n      setCreatingCommentState(\"complete\");\n      setAllowUseComposer(false);\n    },\n    [createThread, composerCoords, maxZIndex]\n  );\n\n  return (\n    \u003c\u003e\n      {/**\n       * Slot is used to wrap the children of the NewThread component\n       * to allow us to add a click event listener to the children\n       *\n       * Slot: https://www.radix-ui.com/primitives/docs/utilities/slot\n       *\n       * Disclaimer: We don't have to download this package specifically,\n       * it's already included when we install Shadcn\n       */}\n      \u003cSlot\n        onClick={() =\u003e\n          setCreatingCommentState(\n            creatingCommentState !== \"complete\" ? \"complete\" : \"placing\"\n          )\n        }\n        style={{ opacity: creatingCommentState !== \"complete\" ? 0.7 : 1 }}\n      \u003e\n        {children}\n      \u003c/Slot\u003e\n\n      {/* if composer coords exist and we're placing a comment, render the composer */}\n      {composerCoords \u0026\u0026 creatingCommentState === \"placed\" ? (\n        /**\n         * Portal.Root is used to render the composer outside of the NewThread component to avoid z-index issuess\n         *\n         * Portal.Root: https://www.radix-ui.com/primitives/docs/utilities/portal\n         */\n        \u003cPortal.Root\n          className='absolute left-0 top-0'\n          style={{\n            pointerEvents: allowUseComposer ? \"initial\" : \"none\",\n            transform: `translate(${composerCoords.x}px, ${composerCoords.y}px)`,\n          }}\n          data-hide-cursors\n        \u003e\n          \u003cPinnedComposer onComposerSubmit={handleComposerSubmit} /\u003e\n        \u003c/Portal.Root\u003e\n      ) : null}\n\n      {/* Show the customizing cursor when placing a comment. The one with comment shape */}\n      \u003cNewThreadCursor display={creatingCommentState === \"placing\"} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ePinnedComposer\u003c/code\u003e\u003c/summary\u003e\n\n```tsx\n\"use client\";\n\nimport Image from \"next/image\";\nimport { Composer, ComposerProps } from \"@liveblocks/react-comments\";\n\ntype Props = {\n  onComposerSubmit: ComposerProps[\"onComposerSubmit\"];\n};\n\nconst PinnedComposer = ({ onComposerSubmit, ...props }: Props) =\u003e {\n  return (\n    \u003cdiv className=\"absolute flex gap-4\" {...props}\u003e\n      \u003cdiv className=\"select-none relative w-9 h-9 shadow rounded-tl-md rounded-tr-full rounded-br-full rounded-bl-full bg-white flex justify-center items-center\"\u003e\n        \u003cImage\n          src={`https://liveblocks.io/avatars/avatar-${Math.floor(Math.random() * 30)}.png`}\n          alt=\"someone\"\n          width={28}\n          height={28}\n          className=\"rounded-full\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"shadow bg-white rounded-lg flex flex-col text-sm min-w-96 overflow-hidden p-2\"\u003e\n        {/**\n         * We're using the Composer component to create a new comment.\n         * Liveblocks provides a Composer component that allows to\n         * create/edit/delete comments.\n         *\n         * Composer: https://liveblocks.io/docs/api-reference/liveblocks-react-comments#Composer\n         */}\n        \u003cComposer\n          onComposerSubmit={onComposerSubmit}\n          autoFocus={true}\n          onKeyUp={(e) =\u003e {\n            e.stopPropagation()\n          }}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default PinnedComposer;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eNewThreadCursor\u003c/code\u003e\u003c/summary\u003e\n\n```tsx\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport * as Portal from \"@radix-ui/react-portal\";\n\nconst DEFAULT_CURSOR_POSITION = -10000;\n\n// display a custom cursor when placing a new thread\nconst NewThreadCursor = ({ display }: { display: boolean }) =\u003e {\n  const [coords, setCoords] = useState({\n    x: DEFAULT_CURSOR_POSITION,\n    y: DEFAULT_CURSOR_POSITION,\n  });\n\n  useEffect(() =\u003e {\n    const updatePosition = (e: MouseEvent) =\u003e {\n      // get canvas element\n      const canvas = document.getElementById(\"canvas\");\n\n      if (canvas) {\n        /**\n         * getBoundingClientRect returns the size of an element and its position relative to the viewport\n         *\n         * getBoundingClientRect: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect\n         */\n        const canvasRect = canvas.getBoundingClientRect();\n\n        // check if the mouse is outside the canvas\n        // if so, hide the custom comment cursor\n        if (\n          e.clientX \u003c canvasRect.left ||\n          e.clientX \u003e canvasRect.right ||\n          e.clientY \u003c canvasRect.top ||\n          e.clientY \u003e canvasRect.bottom\n        ) {\n          setCoords({\n            x: DEFAULT_CURSOR_POSITION,\n            y: DEFAULT_CURSOR_POSITION,\n          });\n          return;\n        }\n      }\n\n      // set the coordinates of the cursor\n      setCoords({\n        x: e.clientX,\n        y: e.clientY,\n      });\n    };\n\n    document.addEventListener(\"mousemove\", updatePosition, false);\n    document.addEventListener(\"mouseenter\", updatePosition, false);\n\n    return () =\u003e {\n      document.removeEventListener(\"mousemove\", updatePosition);\n      document.removeEventListener(\"mouseenter\", updatePosition);\n    };\n  }, []);\n\n  useEffect(() =\u003e {\n    if (display) {\n      document.documentElement.classList.add(\"hide-cursor\");\n    } else {\n      document.documentElement.classList.remove(\"hide-cursor\");\n    }\n  }, [display]);\n\n  if (!display) {\n    return null;\n  }\n\n  return (\n    // Portal.Root is used to render a component outside of its parent component\n    \u003cPortal.Root\u003e\n      \u003cdiv\n        className=\"pointer-events-none fixed left-0 top-0 h-9 w-9 cursor-grab select-none rounded-bl-full rounded-br-full rounded-tl-md rounded-tr-full bg-white shadow-2xl\"\n        style={{\n          transform: `translate(${coords.x}px, ${coords.y}px)`,\n        }}\n      /\u003e\n    \u003c/Portal.Root\u003e\n  );\n};\n\nexport default NewThreadCursor;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eCommentsOverlay\u003c/code\u003e\u003c/summary\u003e\n\n```tsx\n\"use client\";\n\nimport { useCallback, useRef } from \"react\";\nimport { ThreadData } from \"@liveblocks/client\";\n\nimport { ThreadMetadata, useEditThreadMetadata, useThreads, useUser } from \"@/liveblocks.config\";\nimport { useMaxZIndex } from \"@/lib/useMaxZIndex\";\n\nimport { PinnedThread } from \"./PinnedThread\";\n\ntype OverlayThreadProps = {\n  thread: ThreadData\u003cThreadMetadata\u003e;\n  maxZIndex: number;\n};\n\nexport const CommentsOverlay = () =\u003e {\n  /**\n   * We're using the useThreads hook to get the list of threads\n   * in the room.\n   *\n   * useThreads: https://liveblocks.io/docs/api-reference/liveblocks-react#useThreads\n   */\n  const { threads } = useThreads();\n\n  // get the max z-index of a thread\n  const maxZIndex = useMaxZIndex();\n\n  return (\n    \u003cdiv\u003e\n      {threads\n        .filter((thread) =\u003e !thread.metadata.resolved)\n        .map((thread) =\u003e (\n          \u003cOverlayThread key={thread.id} thread={thread} maxZIndex={maxZIndex} /\u003e\n        ))}\n    \u003c/div\u003e\n  );\n};\n\nconst OverlayThread = ({ thread, maxZIndex }: OverlayThreadProps) =\u003e {\n  /**\n   * We're using the useEditThreadMetadata hook to edit the metadata\n   * of a thread.\n   *\n   * useEditThreadMetadata: https://liveblocks.io/docs/api-reference/liveblocks-react#useEditThreadMetadata\n   */\n  const editThreadMetadata = useEditThreadMetadata();\n\n  /**\n   * We're using the useUser hook to get the user of the thread.\n   *\n   * useUser: https://liveblocks.io/docs/api-reference/liveblocks-react#useUser\n   */\n  const { isLoading } = useUser(thread.comments[0].userId);\n\n  // We're using a ref to get the thread element to position it\n  const threadRef = useRef\u003cHTMLDivElement\u003e(null);\n\n  // If other thread(s) above, increase z-index on last element updated\n  const handleIncreaseZIndex = useCallback(() =\u003e {\n    if (maxZIndex === thread.metadata.zIndex) {\n      return;\n    }\n\n    // Update the z-index of the thread in the room\n    editThreadMetadata({\n      threadId: thread.id,\n      metadata: {\n        zIndex: maxZIndex + 1,\n      },\n    });\n  }, [thread, editThreadMetadata, maxZIndex]);\n\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    \u003cdiv\n      ref={threadRef}\n      id={`thread-${thread.id}`}\n      className=\"absolute left-0 top-0 flex gap-5\"\n      style={{\n        transform: `translate(${thread.metadata.x}px, ${thread.metadata.y}px)`,\n      }}\n    \u003e\n      {/* render the thread */}\n      \u003cPinnedThread thread={thread} onFocus={handleIncreaseZIndex} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ePinnedThread\u003c/code\u003e\u003c/summary\u003e\n\n```tsx\n\"use client\";\n\nimport Image from \"next/image\";\nimport { useMemo, useState } from \"react\";\nimport { ThreadData } from \"@liveblocks/client\";\nimport { Thread } from \"@liveblocks/react-comments\";\n\nimport { ThreadMetadata } from \"@/liveblocks.config\";\n\ntype Props = {\n  thread: ThreadData\u003cThreadMetadata\u003e;\n  onFocus: (threadId: string) =\u003e void;\n};\n\nexport const PinnedThread = ({ thread, onFocus, ...props }: Props) =\u003e {\n  // Open pinned threads that have just been created\n  const startMinimized = useMemo(\n    () =\u003e Number(new Date()) - Number(new Date(thread.createdAt)) \u003e 100,\n    [thread]\n  );\n\n  const [minimized, setMinimized] = useState(startMinimized);\n\n  /**\n   * memoize the result of this function so that it doesn't change on every render but only when the thread changes\n   * Memo is used to optimize performance and avoid unnecessary re-renders.\n   *\n   * useMemo: https://react.dev/reference/react/useMemo\n   */\n\n  const memoizedContent = useMemo(\n    () =\u003e (\n      \u003cdiv\n        className='absolute flex cursor-pointer gap-4'\n        {...props}\n        onClick={(e: any) =\u003e {\n          onFocus(thread.id);\n\n          // check if click is on/in the composer\n          if (\n            e.target \u0026\u0026\n            e.target.classList.contains(\"lb-icon\") \u0026\u0026\n            e.target.classList.contains(\"lb-button-icon\")\n          ) {\n            return;\n          }\n\n          setMinimized(!minimized);\n        }}\n      \u003e\n        \u003cdiv\n          className='relative flex h-9 w-9 select-none items-center justify-center rounded-bl-full rounded-br-full rounded-tl-md rounded-tr-full bg-white shadow'\n          data-draggable={true}\n        \u003e\n          \u003cImage\n            src={`https://liveblocks.io/avatars/avatar-${Math.floor(Math.random() * 30)}.png`}\n            alt='Dummy Name'\n            width={28}\n            height={28}\n            draggable={false}\n            className='rounded-full'\n          /\u003e\n        \u003c/div\u003e\n        {!minimized ? (\n          \u003cdiv className='flex min-w-60 flex-col overflow-hidden rounded-lg bg-white text-sm shadow'\u003e\n            \u003cThread\n              thread={thread}\n              indentCommentContent={false}\n              onKeyUp={(e) =\u003e {\n                e.stopPropagation();\n              }}\n            /\u003e\n          \u003c/div\u003e\n        ) : null}\n      \u003c/div\u003e\n    ),\n    [thread.comments.length, minimized]\n  );\n\n  return \u003c\u003e{memoizedContent}\u003c/\u003e;\n};\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"links\"\u003e🔗 Links\u003c/a\u003e\n\n- [Assets](https://drive.google.com/file/d/17tRs0sEiIsCeTYEXhWEdHMrTshuz2oYf/view?usp=sharing)\n- [Components](https://drive.google.com/file/d/1bha-40vlGMIPW9bTRUgHD_SEmT9ZA38S/view?usp=sharing)\n\n## \u003ca name=\"more\"\u003e🚀 More\u003c/a\u003e\n\n**Advance your skills with Next.js 14 Pro Course**\n\nEnjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!\n\n\u003ca href=\"https://jsmastery.pro/next14\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/557837ce-f612-4530-ab24-189e75133c71\" alt=\"Project Banner\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n**Accelerate your professional journey with the Expert Training program**\n\nAnd if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together!\n\n\u003ca href=\"https://www.jsmastery.pro/masterclass\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/fed352ad-f27b-400d-9b8f-c7fe628acb84\" alt=\"Project Banner\"\u003e\n\u003c/a\u003e\n\n#\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhajdin%2Ffigma_clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianhajdin%2Ffigma_clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhajdin%2Ffigma_clone/lists"}