15 |
22 |
19 |
36 | );
37 |
38 | export default Color;
39 |
--------------------------------------------------------------------------------
/components/reaction/ReactionButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | type Props = {
4 | setReaction: (reaction: string) => void;
5 | };
6 |
7 | const ReactionSelector = ({ setReaction }: Props) => (
8 | {placeholder}
20 | inputRef.current.click()}
23 | >
24 | handleInputChange(attributeType, e.target.value)}
29 | />
30 |
31 |
34 |
35 | e.stopPropagation()}
11 | >
12 |
19 | );
20 |
21 | type ReactionButtonProps = {
22 | reaction: string;
23 | onSelect: (reaction: string) => void;
24 | };
25 |
26 | const ReactionButton = ({ reaction, onSelect }: ReactionButtonProps) => (
27 |
33 | );
34 |
35 | export default ReactionSelector;
36 |
--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider
9 |
10 | const Tooltip = TooltipPrimitive.Root
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef
19 | {dimensionsOptions.map((item) => (
20 |
42 |
24 |
27 | handleInputChange(item.property, e.target.value)}
35 | onBlur={(e) => {
36 | isEditingRef.current = false
37 | }}
38 | />
39 |
40 | ))}
41 |
13 |
39 | );
40 | };
41 |
42 | export default PinnedComposer;
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tigma",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@liveblocks/client": "^1.9.7",
13 | "@liveblocks/react": "^1.9.7",
14 | "@liveblocks/react-comments": "^1.9.7",
15 | "@radix-ui/react-collapsible": "^1.0.3",
16 | "@radix-ui/react-context-menu": "^2.1.5",
17 | "@radix-ui/react-dropdown-menu": "^2.0.6",
18 | "@radix-ui/react-label": "^2.0.2",
19 | "@radix-ui/react-select": "^2.0.0",
20 | "@radix-ui/react-slot": "^1.0.2",
21 | "@radix-ui/react-tooltip": "^1.0.7",
22 | "class-variance-authority": "^0.7.0",
23 | "clsx": "^2.1.0",
24 | "fabric": "^5.3.0",
25 | "jspdf": "^2.5.1",
26 | "lucide-react": "^0.316.0",
27 | "next": "14.1.0",
28 | "react": "^18",
29 | "react-dom": "^18",
30 | "tailwind-merge": "^2.2.1",
31 | "tailwindcss-animate": "^1.0.7",
32 | "uuid": "^9.0.1"
33 | },
34 | "devDependencies": {
35 | "@types/fabric": "^5.3.6",
36 | "@types/node": "^20",
37 | "@types/react": "^18",
38 | "@types/react-dom": "^18",
39 | "@types/uuid": "^9.0.8",
40 | "autoprefixer": "^10.4.17",
41 | "eslint": "^8",
42 | "eslint-config-next": "14.1.0",
43 | "eslint-plugin-prettier": "^5.1.3",
44 | "postcss": "^8",
45 | "prettier": "^3.2.4",
46 | "prettier-plugin-tailwindcss": "^0.5.11",
47 | "tailwindcss": "^3.4.1",
48 | "typescript": "^5"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/components/LeftSidebar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useMemo } from "react";
4 | import Image from "next/image";
5 |
6 | import { getShapeInfo } from "@/lib/utils";
7 |
8 | const LeftSidebar = ({ allShapes }: { allShapes: Array
14 |
22 |
23 | {/**
24 | * We're using the Composer component to create a new comment.
25 | * Liveblocks provides a Composer component that allows to
26 | * create/edit/delete comments.
27 | *
28 | * Composer: https://liveblocks.io/docs/api-reference/liveblocks-react-comments#Composer
29 | */}
30 | {
34 | e.stopPropagation()
35 | }}
36 | />
37 |
38 | Layers
14 |
15 | {allShapes?.map((shape: any) => {
16 | const info = getShapeInfo(shape[1]?.type);
17 |
18 | return (
19 |
35 |
23 |
32 | );
33 | })}
34 | {info.name}
31 |
31 | {currentUser && (
32 |
49 | );
50 | }, [others.length]);
51 |
52 | return memoizedUsers;
53 | };
54 |
55 | export default ActiveUsers;
56 |
--------------------------------------------------------------------------------
/components/reaction/index.module.css:
--------------------------------------------------------------------------------
1 | .goUp0 {
2 | opacity: 0;
3 | animation: goUpAnimation0 2s, fadeOut 2s;
4 | }
5 |
6 | @keyframes goUpAnimation0 {
7 | from {
8 | transform: translate(0px, 0px);
9 | }
10 |
11 | to {
12 | transform: translate(0px, -400px);
13 | }
14 | }
15 |
16 | .goUp1 {
17 | opacity: 0;
18 | animation: goUpAnimation1 2s, fadeOut 2s;
19 | }
20 |
21 | @keyframes goUpAnimation1 {
22 | from {
23 | transform: translate(0px, 0px);
24 | }
25 |
26 | to {
27 | transform: translate(0px, -300px);
28 | }
29 | }
30 |
31 | .goUp2 {
32 | opacity: 0;
33 | animation: goUpAnimation2 2s, fadeOut 2s;
34 | }
35 |
36 | @keyframes goUpAnimation2 {
37 | from {
38 | transform: translate(0px, 0px);
39 | }
40 |
41 | to {
42 | transform: translate(0px, -200px);
43 | }
44 | }
45 |
46 | .leftRight0 {
47 | animation: leftRightAnimation0 0.3s alternate infinite ease-in-out;
48 | }
49 |
50 | @keyframes leftRightAnimation0 {
51 | from {
52 | transform: translate(0px, 0px);
53 | }
54 |
55 | to {
56 | transform: translate(50px, 0px);
57 | }
58 | }
59 |
60 | .leftRight1 {
61 | animation: leftRightAnimation1 0.3s alternate infinite ease-in-out;
62 | }
63 |
64 | @keyframes leftRightAnimation1 {
65 | from {
66 | transform: translate(0px, 0px);
67 | }
68 |
69 | to {
70 | transform: translate(100px, 0px);
71 | }
72 | }
73 |
74 | .leftRight2 {
75 | animation: leftRightAnimation2 0.3s alternate infinite ease-in-out;
76 | }
77 |
78 | @keyframes leftRightAnimation2 {
79 | from {
80 | transform: translate(0px, 0px);
81 | }
82 |
83 | to {
84 | transform: translate(-50px, 0px);
85 | }
86 | }
87 |
88 | @keyframes fadeOut {
89 | from {
90 | opacity: 1;
91 | }
92 |
93 | to {
94 | opacity: 0;
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes
45 | +{others.length - 2}
46 |
47 | )}
48 |
36 | {/* Show message input when cursor is in chat mode */}
37 | {cursorState.mode === CursorMode.Chat && (
38 | <>
39 | {/* Custom Cursor shape */}
40 |
69 | );
70 | };
71 |
72 | export default CursorChat;
73 |
--------------------------------------------------------------------------------
/components/ShapesMenu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 |
5 | import { ShapesMenuProps } from "@/types/type";
6 |
7 | import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./ui/dropdown-menu";
8 | import { Button } from "./ui/button";
9 |
10 | const ShapesMenu = ({
11 | item,
12 | activeElement,
13 | handleActiveElement,
14 | handleImageUpload,
15 | imageInputRef,
16 | }: ShapesMenuProps) => {
17 | const isDropdownElem = item.value.some((elem) => elem?.value === activeElement.value);
18 |
19 | return (
20 | <>
21 | e.stopPropagation()}
45 | style={{
46 | borderRadius: 20,
47 | }}
48 | >
49 | {/**
50 | * if there is a previous message, show it above the input
51 | *
52 | * We're doing this because when user press enter, we want to
53 | * show the previous message at top and the input at bottom
54 | */}
55 | {cursorState.previousMessage &&
66 |
67 | )}
68 | {cursorState.previousMessage}
}
56 |
65 | {
37 | onFocus(thread.id);
38 |
39 | // check if click is on/in the composer
40 | if (
41 | e.target &&
42 | e.target.classList.contains("lb-icon") &&
43 | e.target.classList.contains("lb-button-icon")
44 | ) {
45 | return;
46 | }
47 |
48 | setMinimized(!minimized);
49 | }}
50 | >
51 |
76 | ),
77 | [thread.comments.length, minimized]
78 | );
79 |
80 | return <>{memoizedContent};
81 | };
82 |
--------------------------------------------------------------------------------
/components/comments/NewThreadCursor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import * as Portal from "@radix-ui/react-portal";
5 |
6 | const DEFAULT_CURSOR_POSITION = -10000;
7 |
8 | // display a custom cursor when placing a new thread
9 | const NewThreadCursor = ({ display }: { display: boolean }) => {
10 | const [coords, setCoords] = useState({
11 | x: DEFAULT_CURSOR_POSITION,
12 | y: DEFAULT_CURSOR_POSITION,
13 | });
14 |
15 | useEffect(() => {
16 | const updatePosition = (e: MouseEvent) => {
17 | // get canvas element
18 | const canvas = document.getElementById("canvas");
19 |
20 | if (canvas) {
21 | /**
22 | * getBoundingClientRect returns the size of an element and its position relative to the viewport
23 | *
24 | * getBoundingClientRect: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
25 | */
26 | const canvasRect = canvas.getBoundingClientRect();
27 |
28 | // check if the mouse is outside the canvas
29 | // if so, hide the custom comment cursor
30 | if (
31 | e.clientX < canvasRect.left ||
32 | e.clientX > canvasRect.right ||
33 | e.clientY < canvasRect.top ||
34 | e.clientY > canvasRect.bottom
35 | ) {
36 | setCoords({
37 | x: DEFAULT_CURSOR_POSITION,
38 | y: DEFAULT_CURSOR_POSITION,
39 | });
40 | return;
41 | }
42 | }
43 |
44 | // set the coordinates of the cursor
45 | setCoords({
46 | x: e.clientX,
47 | y: e.clientY,
48 | });
49 | };
50 |
51 | document.addEventListener("mousemove", updatePosition, false);
52 | document.addEventListener("mouseenter", updatePosition, false);
53 |
54 | return () => {
55 | document.removeEventListener("mousemove", updatePosition);
56 | document.removeEventListener("mouseenter", updatePosition);
57 | };
58 | }, []);
59 |
60 | useEffect(() => {
61 | if (display) {
62 | document.documentElement.classList.add("hide-cursor");
63 | } else {
64 | document.documentElement.classList.remove("hide-cursor");
65 | }
66 | }, [display]);
67 |
68 | if (!display) {
69 | return null;
70 | }
71 |
72 | return (
73 | // Portal.Root is used to render a component outside of its parent component
74 |
55 |
64 | {!minimized ? (
65 |
66 | {
70 | e.stopPropagation();
71 | }}
72 | />
73 |
74 | ) : null}
75 |
30 | {threads
31 | .filter((thread) => !thread.metadata.resolved)
32 | .map((thread) => (
33 |
36 | );
37 | };
38 |
39 | const OverlayThread = ({ thread, maxZIndex }: OverlayThreadProps) => {
40 | /**
41 | * We're using the useEditThreadMetadata hook to edit the metadata
42 | * of a thread.
43 | *
44 | * useEditThreadMetadata: https://liveblocks.io/docs/api-reference/liveblocks-react#useEditThreadMetadata
45 | */
46 | const editThreadMetadata = useEditThreadMetadata();
47 |
48 | /**
49 | * We're using the useUser hook to get the user of the thread.
50 | *
51 | * useUser: https://liveblocks.io/docs/api-reference/liveblocks-react#useUser
52 | */
53 | const { isLoading } = useUser(thread.comments[0].userId);
54 |
55 | // We're using a ref to get the thread element to position it
56 | const threadRef = useRef
86 | {/* render the thread */}
87 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import jsPDF from "jspdf";
2 | import { twMerge } from "tailwind-merge";
3 | import { type ClassValue, clsx } from "clsx";
4 |
5 | const adjectives = [
6 | "Happy",
7 | "Creative",
8 | "Energetic",
9 | "Lively",
10 | "Dynamic",
11 | "Radiant",
12 | "Joyful",
13 | "Vibrant",
14 | "Cheerful",
15 | "Sunny",
16 | "Sparkling",
17 | "Bright",
18 | "Shining",
19 | ];
20 |
21 | const animals = [
22 | "Dolphin",
23 | "Tiger",
24 | "Elephant",
25 | "Penguin",
26 | "Kangaroo",
27 | "Panther",
28 | "Lion",
29 | "Cheetah",
30 | "Giraffe",
31 | "Hippopotamus",
32 | "Monkey",
33 | "Panda",
34 | "Crocodile",
35 | ];
36 |
37 | export function cn(...inputs: ClassValue[]) {
38 | return twMerge(clsx(inputs));
39 | }
40 |
41 | export function generateRandomName(): string {
42 | const randomAdjective =
43 | adjectives[Math.floor(Math.random() * adjectives.length)];
44 | const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
45 |
46 | return `${randomAdjective} ${randomAnimal}`;
47 | }
48 |
49 | export const getShapeInfo = (shapeType: string) => {
50 | switch (shapeType) {
51 | case "rect":
52 | return {
53 | icon: "/assets/rectangle.svg",
54 | name: "Rectangle",
55 | };
56 |
57 | case "circle":
58 | return {
59 | icon: "/assets/circle.svg",
60 | name: "Circle",
61 | };
62 |
63 | case "triangle":
64 | return {
65 | icon: "/assets/triangle.svg",
66 | name: "Triangle",
67 | };
68 |
69 | case "line":
70 | return {
71 | icon: "/assets/line.svg",
72 | name: "Line",
73 | };
74 |
75 | case "i-text":
76 | return {
77 | icon: "/assets/text.svg",
78 | name: "Text",
79 | };
80 |
81 | case "image":
82 | return {
83 | icon: "/assets/image.svg",
84 | name: "Image",
85 | };
86 |
87 | case "freeform":
88 | return {
89 | icon: "/assets/freeform.svg",
90 | name: "Free Drawing",
91 | };
92 |
93 | default:
94 | return {
95 | icon: "/assets/rectangle.svg",
96 | name: shapeType,
97 | };
98 | }
99 | };
100 |
101 | export const exportToPdf = () => {
102 | const canvas = document.querySelector("canvas");
103 |
104 | if (!canvas) return;
105 |
106 | // use jspdf
107 | const doc = new jsPDF({
108 | orientation: "landscape",
109 | unit: "px",
110 | format: [canvas.width, canvas.height],
111 | });
112 |
113 | // get the canvas data url
114 | const data = canvas.toDataURL();
115 |
116 | // add the image to the pdf
117 | doc.addImage(data, "PNG", 0, 0, canvas.width, canvas.height);
118 |
119 | // download the pdf
120 | doc.save("canvas.pdf");
121 | };
122 |
--------------------------------------------------------------------------------
/components/RightSidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useRef } from "react";
2 |
3 | import { RightSidebarProps } from "@/types/type";
4 | import { bringElement, modifyShape } from "@/lib/shapes";
5 |
6 | import Text from "./settings/Text";
7 | import Color from "./settings/Color";
8 | import Export from "./settings/Export";
9 | import Dimensions from "./settings/Dimensions";
10 |
11 | const RightSidebar = ({
12 | elementAttributes,
13 | setElementAttributes,
14 | fabricRef,
15 | activeObjectRef,
16 | isEditingRef,
17 | syncShapeInStorage,
18 | }: RightSidebarProps) => {
19 | const colorInputRef = useRef(null);
20 | const strokeInputRef = useRef(null);
21 |
22 | const handleInputChange = (property: string, value: string) => {
23 | if (!isEditingRef.current) isEditingRef.current = true;
24 |
25 | setElementAttributes((prev) => ({ ...prev, [property]: value }));
26 |
27 | modifyShape({
28 | canvas: fabricRef.current as fabric.Canvas,
29 | property,
30 | value,
31 | activeObjectRef,
32 | syncShapeInStorage,
33 | });
34 | };
35 |
36 | // memoize the content of the right sidebar to avoid re-rendering on every mouse actions
37 | const memoizedContent = useMemo(
38 | () => (
39 | Design
41 | 42 | Make changes to canvas as you like 43 | 44 | 45 |
43 |
67 | );
68 |
69 | type Props = {
70 | config: {
71 | property: string;
72 | placeholder: string;
73 | options: { label: string; value: string }[];
74 | };
75 | fontSize: string;
76 | fontWeight: string;
77 | fontFamily: string;
78 | handleInputChange: (property: string, value: string) => void;
79 | };
80 |
81 | const RenderSelect = ({
82 | config,
83 | fontSize,
84 | fontWeight,
85 | fontFamily,
86 | handleInputChange,
87 | }: Props) => (
88 |
122 | );
123 |
124 | export default Text;
125 |
--------------------------------------------------------------------------------
/liveblocks.config.ts:
--------------------------------------------------------------------------------
1 | import { LiveMap, createClient } from "@liveblocks/client";
2 | import { createRoomContext } from "@liveblocks/react";
3 |
4 | const client = createClient({
5 | throttle: 16,
6 | publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
7 | });
8 |
9 | // Presence represents the properties that exist on every user in the Room
10 | // and that will automatically be kept in sync. Accessible through the
11 | // `user.presence` property. Must be JSON-serializable.
12 | type Presence = {
13 | // cursor: { x: number, y: number } | null,
14 | // ...
15 | };
16 |
17 | // Optionally, Storage represents the shared document that persists in the
18 | // Room, even after all users leave. Fields under Storage typically are
19 | // LiveList, LiveMap, LiveObject instances, for which updates are
20 | // automatically persisted and synced to all connected clients.
21 | type Storage = {
22 | // author: LiveObject<{ firstName: string, lastName: string }>,
23 | // ...
24 | canvasObjects: LiveMapText
44 | 45 |
46 | {RenderSelect({
47 | config: selectConfigs[0],
48 | fontSize,
49 | fontWeight,
50 | fontFamily,
51 | handleInputChange,
52 | })}
53 |
54 |
66 |
55 | {selectConfigs.slice(1).map((config) =>
56 | RenderSelect({
57 | config,
58 | fontSize,
59 | fontWeight,
60 | fontFamily,
61 | handleInputChange,
62 | })
63 | )}
64 |
65 |
2 |
3 | 4 |
5 |
6 |
7 | 8 |
20 |
21 | ## 📋 Table of Contents
22 |
23 | 1. 🤖 [Introduction](#introduction)
24 | 2. ⚙️ [Tech Stack](#tech-stack)
25 | 3. 🔋 [Features](#features)
26 | 4. 🤸 [Quick Start](#quick-start)
27 | 5. 🕸️ [Snippets](#snippets)
28 | 6. 🔗 [Links](#links)
29 | 7. 🚀 [More](#more)
30 |
31 | ## 🚨 Tutorial
32 |
33 | This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.
34 |
35 | If 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!
36 |
37 | 3 | 4 |
7 | 8 |
9 | 
10 | 
11 | 
12 |
13 |
14 |
10 |
11 |
12 | Real Time Figma Clone
15 | 16 |
17 | Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!
18 |
19 |
130 |
131 |
132 | ```typescript
133 | import type { Config } from "tailwindcss";
134 |
135 | const config = {
136 | darkMode: ["class"],
137 | content: [
138 | "./pages/**/*.{ts,tsx}",
139 | "./components/**/*.{ts,tsx}",
140 | "./app/**/*.{ts,tsx}",
141 | "./src/**/*.{ts,tsx}",
142 | ],
143 | prefix: "",
144 | theme: {
145 | container: {
146 | center: true,
147 | padding: "2rem",
148 | screens: {
149 | "2xl": "1400px",
150 | },
151 | },
152 | extend: {
153 | colors: {
154 | primary: {
155 | black: "#14181F",
156 | green: "#56FFA6",
157 | grey: {
158 | 100: "#2B303B",
159 | 200: "#202731",
160 | 300: "#C4D3ED",
161 | },
162 | },
163 | },
164 | keyframes: {
165 | "accordion-down": {
166 | from: { height: "0" },
167 | to: { height: "var(--radix-accordion-content-height)" },
168 | },
169 | "accordion-up": {
170 | from: { height: "var(--radix-accordion-content-height)" },
171 | to: { height: "0" },
172 | },
173 | },
174 | animation: {
175 | "accordion-down": "accordion-down 0.2s ease-out",
176 | "accordion-up": "accordion-up 0.2s ease-out",
177 | },
178 | },
179 | },
180 | plugins: [require("tailwindcss-animate")],
181 | } satisfies Config;
182 |
183 | export default config;
184 | ```
185 |
186 |
187 |
188 | tailwind.config.ts
131 |
132 | ```typescript
133 | import type { Config } from "tailwindcss";
134 |
135 | const config = {
136 | darkMode: ["class"],
137 | content: [
138 | "./pages/**/*.{ts,tsx}",
139 | "./components/**/*.{ts,tsx}",
140 | "./app/**/*.{ts,tsx}",
141 | "./src/**/*.{ts,tsx}",
142 | ],
143 | prefix: "",
144 | theme: {
145 | container: {
146 | center: true,
147 | padding: "2rem",
148 | screens: {
149 | "2xl": "1400px",
150 | },
151 | },
152 | extend: {
153 | colors: {
154 | primary: {
155 | black: "#14181F",
156 | green: "#56FFA6",
157 | grey: {
158 | 100: "#2B303B",
159 | 200: "#202731",
160 | 300: "#C4D3ED",
161 | },
162 | },
163 | },
164 | keyframes: {
165 | "accordion-down": {
166 | from: { height: "0" },
167 | to: { height: "var(--radix-accordion-content-height)" },
168 | },
169 | "accordion-up": {
170 | from: { height: "var(--radix-accordion-content-height)" },
171 | to: { height: "0" },
172 | },
173 | },
174 | animation: {
175 | "accordion-down": "accordion-down 0.2s ease-out",
176 | "accordion-up": "accordion-up 0.2s ease-out",
177 | },
178 | },
179 | },
180 | plugins: [require("tailwindcss-animate")],
181 | } satisfies Config;
182 |
183 | export default config;
184 | ```
185 |
186 |
189 |
190 |
191 | ```css
192 | @tailwind base;
193 | @tailwind components;
194 | @tailwind utilities;
195 |
196 | @import "@liveblocks/react-comments/styles.css";
197 |
198 | * {
199 | font-family:
200 | work sans,
201 | sans-serif;
202 | }
203 |
204 | @layer utilities {
205 | .no-ring {
206 | @apply outline-none ring-0 ring-offset-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0 !important;
207 | }
208 |
209 | .input-ring {
210 | @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;
211 | }
212 |
213 | .right-menu-content {
214 | @apply flex w-80 flex-col gap-y-1 border-none bg-primary-black py-4 text-white !important;
215 | }
216 |
217 | .right-menu-item {
218 | @apply flex justify-between px-3 py-2 hover:bg-primary-grey-200 !important;
219 | }
220 | }
221 | ```
222 |
223 |
224 |
225 | ## 🔗 Links
226 |
227 | - [Assets](https://drive.google.com/file/d/17tRs0sEiIsCeTYEXhWEdHMrTshuz2oYf/view?usp=sharing)
228 | - [Components](https://drive.google.com/file/d/1bha-40vlGMIPW9bTRUgHD_SEmT9ZA38S/view?usp=sharing)
229 |
230 | ## 🚀 More
231 |
232 | **Advance your skills with Next.js 14 Pro Course**
233 |
234 | Enjoyed 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!
235 |
236 |
237 | app/globals.css
190 |
191 | ```css
192 | @tailwind base;
193 | @tailwind components;
194 | @tailwind utilities;
195 |
196 | @import "@liveblocks/react-comments/styles.css";
197 |
198 | * {
199 | font-family:
200 | work sans,
201 | sans-serif;
202 | }
203 |
204 | @layer utilities {
205 | .no-ring {
206 | @apply outline-none ring-0 ring-offset-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0 !important;
207 | }
208 |
209 | .input-ring {
210 | @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;
211 | }
212 |
213 | .right-menu-content {
214 | @apply flex w-80 flex-col gap-y-1 border-none bg-primary-black py-4 text-white !important;
215 | }
216 |
217 | .right-menu-item {
218 | @apply flex justify-between px-3 py-2 hover:bg-primary-grey-200 !important;
219 | }
220 | }
221 | ```
222 |
223 | 241 |
242 | 243 | **Accelerate your professional journey with the Expert Training program** 244 | 245 | And 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! 246 | 247 | 248 |
{item.name}
283 |{item.shortcut}
284 |