diff --git a/package-lock.json b/package-lock.json index 065fd6f6..84eedb79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@react-three/postprocessing": "^2.19.1", "@react-three/rapier": "^1.4.0", "@tailwindcss/vite": "^4.0.3", + "clsx": "^2.1.1", "framer-motion": "^11.3.24", "gl-matrix": "^3.4.3", "gsap": "^3.12.5", @@ -35,6 +36,7 @@ "react-syntax-highlighter": "^15.5.0", "react-use-gesture": "^9.1.3", "sonner": "^1.7.1", + "tailwind-merge": "^3.2.0", "tailwindcss": "^4.0.3", "three": "^0.167.1" }, @@ -4534,7 +4536,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "dev": true, + "license": "MIT", "engines": { "node": ">=6" } @@ -9262,6 +9264,16 @@ "node": ">=18" } }, + "node_modules/tailwind-merge": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.2.0.tgz", + "integrity": "sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.3.tgz", diff --git a/package.json b/package.json index 3e1b6a87..0462d108 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@react-three/postprocessing": "^2.19.1", "@react-three/rapier": "^1.4.0", "@tailwindcss/vite": "^4.0.3", + "clsx": "^2.1.1", "framer-motion": "^11.3.24", "gl-matrix": "^3.4.3", "gsap": "^3.12.5", @@ -43,6 +44,7 @@ "react-syntax-highlighter": "^15.5.0", "react-use-gesture": "^9.1.3", "sonner": "^1.7.1", + "tailwind-merge": "^3.2.0", "tailwindcss": "^4.0.3", "three": "^0.167.1" }, diff --git a/src/constants/Categories.js b/src/constants/Categories.js index 021ce414..581187f1 100644 --- a/src/constants/Categories.js +++ b/src/constants/Categories.js @@ -1,5 +1,5 @@ // Highlighted sidebar items -export const NEW = ['Dither', 'Animated List', 'Gooey Nav', 'Threads', 'Lightning', 'Folder', 'Text Cursor']; +export const NEW = ['Dither', 'Animated List', 'Gooey Nav', 'Threads', 'Lightning', 'Folder', 'Text Cursor', 'Cpu Architecture']; export const UPDATED = []; // Used for main sidebar navigation @@ -75,7 +75,8 @@ export const CATEGORIES = [ 'Infinite Menu', 'Rolling Gallery', 'Stepper', - 'Bounce Cards' + 'Bounce Cards', + 'Cpu Architecture' ], }, { diff --git a/src/constants/Components.js b/src/constants/Components.js index 20d9c6f7..7c195375 100644 --- a/src/constants/Components.js +++ b/src/constants/Components.js @@ -64,6 +64,7 @@ const components = { 'animated-list': () => import("../demo/Components/AnimatedListDemo"), 'folder': () => import("../demo/Components/FolderDemo"), 'gooey-nav': () => import("../demo/Components/GooeyNavDemo"), + 'cpu-architecture': () => import("../demo/Components/CpuArchitectureDemo"), }; const backgrounds = { diff --git a/src/constants/code/Components/cpuArchitectureCode.js b/src/constants/code/Components/cpuArchitectureCode.js new file mode 100644 index 00000000..c149e6f9 --- /dev/null +++ b/src/constants/code/Components/cpuArchitectureCode.js @@ -0,0 +1,99 @@ +import { generateCliCommands } from "../../../utils/utils"; + +export const cpuArchitecture = { + code: `import React from "react"; +import "./CpuArchitecture.css"; + +/** + * CPU Architecture component that displays a visual representation of a CPU with animated paths and lights. + * @param {Object} props - Component props + * @param {string} [props.className] - Additional classes for the component + * @param {string} [props.width="100%"] - Width of the SVG + * @param {string} [props.height="100%"] - Height of the SVG + * @param {string} [props.text="CPU"] - Text to display in the CPU box + * @param {boolean} [props.showCpuConnections=true] - Whether to show the CPU connection rectangles + * @param {number} [props.lineMarkerSize=18] - Size of the marker at the start of each path + * @param {boolean} [props.animateText=true] - Whether to animate the CPU text + * @param {boolean} [props.animateLines=true] - Whether to animate the lines + * @param {boolean} [props.animateMarkers=true] - Whether to animate the markers + */ +const CpuArchitecture = ({ + className, + width = "100%", + height = "100%", + text = "CPU", + showCpuConnections = true, + animateText = true, + lineMarkerSize = 18, + animateLines = true, + animateMarkers = true, +}) => { + const classNames = ["text-muted", className].filter(Boolean).join(" "); + + return ( + + {/* SVG content with paths, masks, and animations */} + {/* For brevity, see full component code */} + + ); +}; + +export { CpuArchitecture }; +`, + usage: `import React from "react"; +import { CpuArchitecture } from "./CpuArchitecture"; +import "./CpuArchitecture.css"; + +export default function App() { + return ( +
+ +
+ ); +}`, + css: `/* CpuArchitecture.css */ + +/* Animation for each light */ +.cpu-architecture { + animation-duration: 8s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.cpu-line-1 { + animation-name: moveBlueLine; +} + +.cpu-line-2 { + animation-name: moveYellowLine; + animation-delay: 0.5s; +} + +/* And other animation classes... */ + +/* Path animations */ +@keyframes moveBlueLine { + 0% { transform: translate(10px, 20px); } + 50% { transform: translate(90px, 55px); } + 100% { transform: translate(10px, 20px); } +} + +/* And other keyframes... */ +`, + // Generate CLI commands + ...generateCliCommands("Components/CpuArchitecture") +}; \ No newline at end of file diff --git a/src/content/Components/CpuArchitecture/CpuArchitecture.css b/src/content/Components/CpuArchitecture/CpuArchitecture.css new file mode 100644 index 00000000..fc8d675b --- /dev/null +++ b/src/content/Components/CpuArchitecture/CpuArchitecture.css @@ -0,0 +1,96 @@ +/* CpuArchitecture.css */ + +/* Animation for each light */ +.cpu-architecture { + animation-duration: 8s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.cpu-line-1 { + animation-name: moveBlueLine; +} + +.cpu-line-2 { + animation-name: moveYellowLine; + animation-delay: 0.5s; +} + +.cpu-line-3 { + animation-name: movePinkishLine; + animation-delay: 1s; +} + +.cpu-line-4 { + animation-name: moveWhiteLine; + animation-delay: 1.5s; +} + +.cpu-line-5 { + animation-name: moveGreenLine; + animation-delay: 2s; +} + +.cpu-line-6 { + animation-name: moveOrangeLine; + animation-delay: 2.5s; +} + +.cpu-line-7 { + animation-name: moveCyanLine; + animation-delay: 3s; +} + +.cpu-line-8 { + animation-name: moveRoseLine; + animation-delay: 3.5s; +} + +/* Path animations */ +@keyframes moveBlueLine { + 0% { transform: translate(10px, 20px); } + 50% { transform: translate(90px, 55px); } + 100% { transform: translate(10px, 20px); } +} + +@keyframes moveYellowLine { + 0% { transform: translate(180px, 10px); } + 50% { transform: translate(105px, 45px); } + 100% { transform: translate(180px, 10px); } +} + +@keyframes movePinkishLine { + 0% { transform: translate(130px, 20px); } + 50% { transform: translate(115px, 45px); } + 100% { transform: translate(130px, 20px); } +} + +@keyframes moveWhiteLine { + 0% { transform: translate(170px, 80px); } + 50% { transform: translate(115px, 50px); } + 100% { transform: translate(170px, 80px); } +} + +@keyframes moveGreenLine { + 0% { transform: translate(135px, 65px); } + 50% { transform: translate(95px, 60px); } + 100% { transform: translate(135px, 65px); } +} + +@keyframes moveOrangeLine { + 0% { transform: translate(94.8px, 95px); } + 50% { transform: translate(94.8px, 55px); } + 100% { transform: translate(94.8px, 95px); } +} + +@keyframes moveCyanLine { + 0% { transform: translate(88px, 88px); } + 50% { transform: translate(75px, 55px); } + 100% { transform: translate(88px, 88px); } +} + +@keyframes moveRoseLine { + 0% { transform: translate(30px, 30px); } + 50% { transform: translate(70px, 45px); } + 100% { transform: translate(30px, 30px); } +} \ No newline at end of file diff --git a/src/content/Components/CpuArchitecture/CpuArchitecture.jsx b/src/content/Components/CpuArchitecture/CpuArchitecture.jsx new file mode 100644 index 00000000..2fde9551 --- /dev/null +++ b/src/content/Components/CpuArchitecture/CpuArchitecture.jsx @@ -0,0 +1,449 @@ +import React, { useId } from "react"; +import "./CpuArchitecture.css"; + +/** + * CPU Architecture component that displays a visual representation of a CPU with animated paths and lights. + * @param {Object} props - Component props + * @param {string} [props.className] - Additional classes for the component + * @param {string} [props.width="100%"] - Width of the SVG + * @param {string} [props.height="100%"] - Height of the SVG + * @param {string} [props.text="CPU"] - Text to display in the CPU box + * @param {boolean} [props.showCpuConnections=true] - Whether to show the CPU connection rectangles + * @param {number} [props.lineMarkerSize=18] - Size of the marker at the start of each path + * @param {boolean} [props.animateText=true] - Whether to animate the CPU text + * @param {boolean} [props.animateLines=true] - Whether to animate the lines + * @param {boolean} [props.animateMarkers=true] - Whether to animate the markers + */ +const CpuArchitecture = ({ + className, + width = "100%", + height = "100%", + text = "CPU", + showCpuConnections = true, + animateText = true, + lineMarkerSize = 18, + animateLines = true, + animateMarkers = true, +}) => { + const classNames = ["text-muted", className].filter(Boolean).join(" "); + // Generate unique IDs for SVG elements to prevent conflicts + const uniqueId = useId(); + const markerId = `cpu-circle-marker-${uniqueId}`; + const blueGradId = `cpu-blue-grad-${uniqueId}`; + const yellowGradId = `cpu-yellow-grad-${uniqueId}`; + const pinkishGradId = `cpu-pinkish-grad-${uniqueId}`; + const whiteGradId = `cpu-white-grad-${uniqueId}`; + const greenGradId = `cpu-green-grad-${uniqueId}`; + const orangeGradId = `cpu-orange-grad-${uniqueId}`; + const cyanGradId = `cpu-cyan-grad-${uniqueId}`; + const roseGradId = `cpu-rose-grad-${uniqueId}`; + const connectionGradId = `cpu-connection-gradient-${uniqueId}`; + const textGradId = `cpu-text-gradient-${uniqueId}`; + const shadowId = `cpu-light-shadow-${uniqueId}`; + const mask1Id = `cpu-mask-1-${uniqueId}`; + const mask2Id = `cpu-mask-2-${uniqueId}`; + const mask3Id = `cpu-mask-3-${uniqueId}`; + const mask4Id = `cpu-mask-4-${uniqueId}`; + const mask5Id = `cpu-mask-5-${uniqueId}`; + const mask6Id = `cpu-mask-6-${uniqueId}`; + const mask7Id = `cpu-mask-7-${uniqueId}`; + const mask8Id = `cpu-mask-8-${uniqueId}`; + + return ( + + {/* Paths */} + + {/* 1st */} + + {/* 2nd */} + + {/* 3rd */} + + {/* 4th */} + + {/* 5th */} + + {/* 6th */} + + {/* 7th */} + + {/* 8th */} + + {/* Animation For Path Starting */} + {animateLines && ( + + )} + + + {/* 1. Blue Light */} + + + + {/* 2. Yellow Light */} + + + + {/* 3. Pinkish Light */} + + + + {/* 4. White Light */} + + + + {/* 5. Green Light */} + + + + {/* 6. Orange Light */} + + + + {/* 7. Cyan Light */} + + + + {/* 8. Rose Light */} + + + + {/* CPU Box */} + + {/* Cpu connections */} + {showCpuConnections && ( + + + + + + + + + + + )} + {/* Main CPU Rectangle */} + + {/* CPU Text */} + + {text} + + + {/* Masks */} + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Gradients */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {animateMarkers && ( + + )} + + + {/* Cpu connection gradient */} + + + + + {/* Add CPU Text Gradient */} + + + + + + + + + + + + + + ); +}; + +export { CpuArchitecture }; \ No newline at end of file diff --git a/src/content/Components/CpuArchitecture/index.js b/src/content/Components/CpuArchitecture/index.js new file mode 100644 index 00000000..31f78444 --- /dev/null +++ b/src/content/Components/CpuArchitecture/index.js @@ -0,0 +1 @@ +export * from './CpuArchitecture'; \ No newline at end of file diff --git a/src/demo/Components/CpuArchitectureDemo.jsx b/src/demo/Components/CpuArchitectureDemo.jsx new file mode 100644 index 00000000..3af81009 --- /dev/null +++ b/src/demo/Components/CpuArchitectureDemo.jsx @@ -0,0 +1,158 @@ +import { useState } from "react"; +import { CodeTab, PreviewTab, CliTab, TabbedLayout } from "../../components/common/TabbedLayout"; +import { Box, Input, FormLabel, FormControl } from "@chakra-ui/react"; + +import PreviewSwitch from "../../components/common/PreviewSwitch"; +import Customize from "../../components/common/Customize"; +import PreviewSlider from "../../components/common/PreviewSlider"; +import CodeExample from "../../components/code/CodeExample"; +import Dependencies from "../../components/code/Dependencies"; +import PropTable from "../../components/common/PropTable"; +import CliInstallation from "../../components/code/CliInstallation"; + +import { CpuArchitecture } from "../../content/Components/CpuArchitecture/CpuArchitecture"; +import { cpuArchitecture } from "../../constants/code/Components/cpuArchitectureCode"; + +const CpuArchitectureDemo = () => { + // State for customizable props + const [text, setText] = useState("CPU"); + const [showCpuConnections, setShowCpuConnections] = useState(true); + const [animateText, setAnimateText] = useState(true); + const [animateLines, setAnimateLines] = useState(true); + const [animateMarkers, setAnimateMarkers] = useState(true); + const [lineMarkerSize, setLineMarkerSize] = useState(18); + + // PropTable data + const propData = [ + { + name: "className", + type: "string", + default: "undefined", + description: "Additional CSS classes for the component." + }, + { + name: "width", + type: "string", + default: "100%", + description: "Width of the SVG." + }, + { + name: "height", + type: "string", + default: "100%", + description: "Height of the SVG." + }, + { + name: "text", + type: "string", + default: "CPU", + description: "Text to display inside the CPU box." + }, + { + name: "showCpuConnections", + type: "boolean", + default: "true", + description: "Whether to show the CPU connection rectangles." + }, + { + name: "lineMarkerSize", + type: "number", + default: "18", + description: "Size of the circle markers at the beginning of each path." + }, + { + name: "animateText", + type: "boolean", + default: "true", + description: "Whether to animate the CPU text with a gradient effect." + }, + { + name: "animateLines", + type: "boolean", + default: "true", + description: "Whether to animate the lines drawing effect." + }, + { + name: "animateMarkers", + type: "boolean", + default: "true", + description: "Whether to animate the circle markers." + } + ]; + + return ( + + + + + + + + + CPU Text + setText(e.target.value)} + mb={4} + /> + + + + + { setShowCpuConnections(e.target.checked); }} + /> + + { setAnimateText(e.target.checked); }} + /> + + { setAnimateLines(e.target.checked); }} + /> + + { setAnimateMarkers(e.target.checked); }} + /> + + + + + + + + + + + + + + + ); +}; + +export default CpuArchitectureDemo; \ No newline at end of file diff --git a/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.css b/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.css new file mode 100644 index 00000000..fc8d675b --- /dev/null +++ b/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.css @@ -0,0 +1,96 @@ +/* CpuArchitecture.css */ + +/* Animation for each light */ +.cpu-architecture { + animation-duration: 8s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.cpu-line-1 { + animation-name: moveBlueLine; +} + +.cpu-line-2 { + animation-name: moveYellowLine; + animation-delay: 0.5s; +} + +.cpu-line-3 { + animation-name: movePinkishLine; + animation-delay: 1s; +} + +.cpu-line-4 { + animation-name: moveWhiteLine; + animation-delay: 1.5s; +} + +.cpu-line-5 { + animation-name: moveGreenLine; + animation-delay: 2s; +} + +.cpu-line-6 { + animation-name: moveOrangeLine; + animation-delay: 2.5s; +} + +.cpu-line-7 { + animation-name: moveCyanLine; + animation-delay: 3s; +} + +.cpu-line-8 { + animation-name: moveRoseLine; + animation-delay: 3.5s; +} + +/* Path animations */ +@keyframes moveBlueLine { + 0% { transform: translate(10px, 20px); } + 50% { transform: translate(90px, 55px); } + 100% { transform: translate(10px, 20px); } +} + +@keyframes moveYellowLine { + 0% { transform: translate(180px, 10px); } + 50% { transform: translate(105px, 45px); } + 100% { transform: translate(180px, 10px); } +} + +@keyframes movePinkishLine { + 0% { transform: translate(130px, 20px); } + 50% { transform: translate(115px, 45px); } + 100% { transform: translate(130px, 20px); } +} + +@keyframes moveWhiteLine { + 0% { transform: translate(170px, 80px); } + 50% { transform: translate(115px, 50px); } + 100% { transform: translate(170px, 80px); } +} + +@keyframes moveGreenLine { + 0% { transform: translate(135px, 65px); } + 50% { transform: translate(95px, 60px); } + 100% { transform: translate(135px, 65px); } +} + +@keyframes moveOrangeLine { + 0% { transform: translate(94.8px, 95px); } + 50% { transform: translate(94.8px, 55px); } + 100% { transform: translate(94.8px, 95px); } +} + +@keyframes moveCyanLine { + 0% { transform: translate(88px, 88px); } + 50% { transform: translate(75px, 55px); } + 100% { transform: translate(88px, 88px); } +} + +@keyframes moveRoseLine { + 0% { transform: translate(30px, 30px); } + 50% { transform: translate(70px, 45px); } + 100% { transform: translate(30px, 30px); } +} \ No newline at end of file diff --git a/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.tsx b/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.tsx new file mode 100644 index 00000000..bf8e2e61 --- /dev/null +++ b/src/ts-tailwind/Components/CpuArchitecture/CpuArchitecture.tsx @@ -0,0 +1,452 @@ +import React, { useId } from "react"; +import "./CpuArchitecture.css"; + +// Simple className merging utility function since i don't have access to the cn utility +const cn = (...classes: (string | undefined)[]) => { + return classes.filter(Boolean).join(" "); +}; + +export interface CpuArchitectureSvgProps { + className?: string; + width?: string; + height?: string; + text?: string; + showCpuConnections?: boolean; + lineMarkerSize?: number; + animateText?: boolean; + animateLines?: boolean; + animateMarkers?: boolean; +} + +const CpuArchitecture = ({ + className, + width = "100%", + height = "100%", + text = "CPU", + showCpuConnections = true, + animateText = true, + lineMarkerSize = 18, + animateLines = true, + animateMarkers = true, +}: CpuArchitectureSvgProps) => { + // Generate unique IDs for SVG elements to prevent conflicts + const uniqueId = useId(); + const markerId = `cpu-circle-marker-${uniqueId}`; + const blueGradId = `cpu-blue-grad-${uniqueId}`; + const yellowGradId = `cpu-yellow-grad-${uniqueId}`; + const pinkishGradId = `cpu-pinkish-grad-${uniqueId}`; + const whiteGradId = `cpu-white-grad-${uniqueId}`; + const greenGradId = `cpu-green-grad-${uniqueId}`; + const orangeGradId = `cpu-orange-grad-${uniqueId}`; + const cyanGradId = `cpu-cyan-grad-${uniqueId}`; + const roseGradId = `cpu-rose-grad-${uniqueId}`; + const connectionGradId = `cpu-connection-gradient-${uniqueId}`; + const textGradId = `cpu-text-gradient-${uniqueId}`; + const shadowId = `cpu-light-shadow-${uniqueId}`; + const mask1Id = `cpu-mask-1-${uniqueId}`; + const mask2Id = `cpu-mask-2-${uniqueId}`; + const mask3Id = `cpu-mask-3-${uniqueId}`; + const mask4Id = `cpu-mask-4-${uniqueId}`; + const mask5Id = `cpu-mask-5-${uniqueId}`; + const mask6Id = `cpu-mask-6-${uniqueId}`; + const mask7Id = `cpu-mask-7-${uniqueId}`; + const mask8Id = `cpu-mask-8-${uniqueId}`; + + return ( + + {/* Paths */} + + {/* 1st */} + + {/* 2nd */} + + {/* 3rd */} + + {/* 4th */} + + {/* 5th */} + + {/* 6th */} + + {/* 7th */} + + {/* 8th */} + + {/* Animation For Path Starting */} + {animateLines && ( + + )} + + + {/* 1. Blue Light */} + + + + {/* 2. Yellow Light */} + + + + {/* 3. Pinkish Light */} + + + + {/* 4. White Light */} + + + + {/* 5. Green Light */} + + + + {/* 6. Orange Light */} + + + + {/* 7. Cyan Light */} + + + + {/* 8. Rose Light */} + + + + {/* CPU Box */} + + {/* Cpu connections */} + {showCpuConnections && ( + + + + + + + + + + + )} + {/* Main CPU Rectangle */} + + {/* CPU Text */} + + {text} + + + {/* Masks */} + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Gradients */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {animateMarkers && ( + + )} + + + {/* Cpu connection gradient */} + + + + + {/* Add CPU Text Gradient */} + + + + + + + + + + + + + + ); +}; + +export { CpuArchitecture }; \ No newline at end of file diff --git a/src/ts-tailwind/Components/CpuArchitecture/index.ts b/src/ts-tailwind/Components/CpuArchitecture/index.ts new file mode 100644 index 00000000..31f78444 --- /dev/null +++ b/src/ts-tailwind/Components/CpuArchitecture/index.ts @@ -0,0 +1 @@ +export * from './CpuArchitecture'; \ No newline at end of file