From 62d9dc86bf828ea5b70191cd6677140eb02cdc71 Mon Sep 17 00:00:00 2001 From: Ayush <99096397+ayush4345@users.noreply.github.com> Date: Wed, 28 Feb 2024 12:36:16 +0530 Subject: [PATCH] added particles animation --- next.config.js | 3 + package.json | 1 + pnpm-lock.yaml | 312 +++++++++++++++++++++++++++++++++++ src/components/hero.js | 8 +- src/components/particles.jsx | 112 +++++++++++++ 5 files changed, 432 insertions(+), 4 deletions(-) create mode 100644 src/components/particles.jsx diff --git a/next.config.js b/next.config.js index 00a7514..32213b6 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,9 @@ /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", + compiler: { + removeConsole: true, + }, } module.exports = nextConfig \ No newline at end of file diff --git a/package.json b/package.json index f0f4efd..2b03d57 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1", "tailwindcss-animate": "^1.0.7", + "tsparticles": "^3.3.0", "typewriter-effect": "^2.21.0" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 59cad87..a64227b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -116,6 +116,9 @@ dependencies: tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.1) + tsparticles: + specifier: ^3.3.0 + version: 3.3.0 typewriter-effect: specifier: ^2.21.0 version: 2.21.0(react-dom@18.2.0)(react@18.2.0) @@ -521,11 +524,151 @@ packages: tailwindcss: 3.4.1 dev: false + /@tsparticles/basic@3.3.0: + resolution: {integrity: sha512-YB6+pFnkby6hnHhDqH2Q7+Y6Zcm7RAgZLQ8gkecHQxywD0RFItpYQfxpIf82mOTZ39NoeVdH6AF3mydgxVNAMQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + '@tsparticles/move-base': 3.3.0 + '@tsparticles/shape-circle': 3.3.0 + '@tsparticles/updater-color': 3.3.0 + '@tsparticles/updater-opacity': 3.3.0 + '@tsparticles/updater-out-modes': 3.3.0 + '@tsparticles/updater-size': 3.3.0 + dev: false + /@tsparticles/engine@3.3.0: resolution: {integrity: sha512-Sr24epYquTelGrUbMaknXTscib8IMQJrbmShJnEemU+wpZNIPtAh09sQgGtq1pUxrGQRUSQIgaybYuXcNgk8rg==} requiresBuild: true dev: false + /@tsparticles/interaction-external-attract@3.3.0: + resolution: {integrity: sha512-tkwGFoOwwwZm7tcXW4zeJ0EVeRxtOre3EkMT151E/LKmjudo7sQHXpJk/tfz839OdMi3gGq7+9J88AEyl0TVhA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-bounce@3.3.0: + resolution: {integrity: sha512-4j+Dz/cj+/zgDJZPDVDZz+SCUSxzdDCcEOxjo4KwEYa/vQH4hBPlGxM7V1wIE6g/bKTbNZbmcDAW8haRVrtdSA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-bubble@3.3.0: + resolution: {integrity: sha512-xdtensiGRhR1C2cOlKBTGr5Sxu9QmMEjloSbr7mx8pyV03OnLG2j5GqFxTzVpoFa+yojjMQ/E5KXctWfQ2FbTg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-connect@3.3.0: + resolution: {integrity: sha512-mYdeRclR41qlLwbF3ONsZzu5VDkcML95BDQOrc5uVOC8AukAVhoTKjwVYgii7g3obSvYzSE1YvaAOuLDZOpNwg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-grab@3.3.0: + resolution: {integrity: sha512-07dsnz1VzuFY655Ba24kXwyYj/tFSQ0M0ae55z3UFa09o/1uJiDKCdnhBqSAT+MrLiVRX/h8BHL0XS9O3EwE/Q==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-pause@3.3.0: + resolution: {integrity: sha512-b43k5ecrdsWsiSpKtMPolPhw7EfBeaoH6fFeRUhv7tF4itTHB+DEONcvIOlN3jlQswgZm/sZcaq4dnxT31t9kw==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-push@3.3.0: + resolution: {integrity: sha512-pwU2hBvp6/YstK+wtChfKJtXkEBP2Z3836rkK+CUeO7sbsSzO2SkJtmUPfJZJHCcvpCjEoDfhp/3zPskBiwe0w==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-remove@3.3.0: + resolution: {integrity: sha512-jg6aA0eC1rxZ/bamKJnApBhxABsk/4RgtaWNHLWAKTlen4TdF1pqECqit9Q5C6q5kcJrG7bmRF3VuWd80WiIwQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-repulse@3.3.0: + resolution: {integrity: sha512-6fZg9PNUZqXaBtI4OqTKPU98a7/CJP5C+us90q1QqEBhIFSxJBnIkmuloLZuZ7Vj8Ul1FID2Zr8HN5b5EJOZPw==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-slow@3.3.0: + resolution: {integrity: sha512-flqaF6QN6XuEvKP2KhG2ln82wB9q5WPLLoUBDfWBbYI3gm+O0AH8orysHXYYGtLv+20ZdNiS8fijNl3jvNVLzQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-external-trail@3.3.0: + resolution: {integrity: sha512-FYwM4YBY/b9N755WGVwUElfwBanuyKaEV+j6wfjzrFVD9DWP4VEVTcGSTPkJL8ZVauawSbpcuy2A3BWAQ1SNYA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-particles-attract@3.3.0: + resolution: {integrity: sha512-jNFcAfrgz7hqC1rknnvnahrfLRUR8SRI5dJI1MVisi9kuNkSFJUSiGMUbDzYx8eKqfBwcFphVlWrcaylaYeWvA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-particles-collisions@3.3.0: + resolution: {integrity: sha512-OwHaTaXA0WmHoyd6ygVnJXWqJvK8ObVUoKwSBQg7yRToZkL7lqKnqCJxjoWlHENORP9p8OF/G3JoX0rJXQYQcQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/interaction-particles-links@3.3.0: + resolution: {integrity: sha512-m2cqciwsolCwrzPMcFOzruuCxqxEmofGoKHzPzN5XAUaCDNGj2lsfKHOSgk3orAQQZUmiYoJBr1rIFGEzIGvvg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/move-base@3.3.0: + resolution: {integrity: sha512-yxfynO0CHWYlhyXy53/HzsN8zyD+v1RX0wT9X1Wry5lgnxhJoFTAP/Pk+srgyLOdaD0WwoRjB3yA/0f/haBWkg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/move-parallax@3.3.0: + resolution: {integrity: sha512-s8i0xrsQavI3megcdkKs768jo0lJZEgBL8iF8gL77fpJ56YrWicOC4hEEGW7UOYq44D9m16e+lgr7P7eLpMKAg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/plugin-absorbers@3.3.0: + resolution: {integrity: sha512-Dr8pZBoyb4Geo4VoVJbUuUDXDPgHE1rpRPWr1mVAda8h79ZNl9LOIldk/RRoxFecCx8jrGzBSDxjDtAIJyFi1w==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/plugin-easing-quad@3.3.0: + resolution: {integrity: sha512-6c5SRGj9qzASOJwiAc06JVOtH9ZaTXrF9p7svZ1qr/S85fRoRL+Jz/ucl8cdRDqRJvXTrt1qkz2OMi+P+4AgEA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/plugin-emitters-shape-circle@3.3.0: + resolution: {integrity: sha512-UXFgI4zZLJPv/FFl4cP+KX21KWABgGcqNwrf1u5GmRP3crU8Hvep0iSZdF2vrDzpZJswL0LFmgBFBBHepEWIAQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + '@tsparticles/plugin-emitters': 3.3.0 + dev: false + + /@tsparticles/plugin-emitters-shape-square@3.3.0: + resolution: {integrity: sha512-Jk3t9VUTfCqNRIEQRgJ8ySYe5rgi1KCOSPkqJQ1SooSMiRoWybghwofWR1Gwo5yUsg8wZ+mdlb2OIq3juyYvIA==} + dependencies: + '@tsparticles/engine': 3.3.0 + '@tsparticles/plugin-emitters': 3.3.0 + dev: false + + /@tsparticles/plugin-emitters@3.3.0: + resolution: {integrity: sha512-Ze2f47YBxjgfUHRKy0YdR+j6kGq7yrrdnbR5Ttq5d6vSjC13tFL+T14YM0tqZBr4QaZZB35UpKr3r2C4WVdDug==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + /@tsparticles/react@3.0.0(@tsparticles/engine@3.3.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==} peerDependencies: @@ -538,6 +681,157 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@tsparticles/shape-circle@3.3.0: + resolution: {integrity: sha512-m/T3SbZf8Zrn0m4Rd+8KTCMy54cofkaXa1Z7oikQYr/gPigT2C7Bo4vwQpiP8HKU+Xh5CEHFyc0s6ogfOaA2fA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-emoji@3.3.0: + resolution: {integrity: sha512-F9tl3jUTMCRzbwhpKk3t1z2d+7vbyeAoHAEeG4UdUVorO0ovaqzj16KcpfSu2wyGkPSzUKIyHX8doB9MR8DfGw==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-image@3.3.0: + resolution: {integrity: sha512-w5PHiDZjILIUEDIn10bFasY1qnSY9lwV0ekoTLGDepiS/EmyNJb0+D7gWOy/mhFlpK1637Ngbz1Axw3Zfl8ObA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-line@3.3.0: + resolution: {integrity: sha512-PPkwsBL2F4TNK/6eXThhqTcInSPpGb5rjsBR3bbWBXKGEH+4ibLA0biBQWPjxqY/UrAt4St1dpktKRmTt0XacA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-polygon@3.3.0: + resolution: {integrity: sha512-JAHKIO8Pmzft0METZn6BqTHpn9PxWXxhAlPMG0XOEuziHpvMxmTXYbJNDFlmWu9RFpAjfIeGg8zUcS1xNuGWUQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-square@3.3.0: + resolution: {integrity: sha512-72tLkzQ5QkkhgIFy+qqdA+vmBk8VE4PuJcLJ12FVH8e3uPJDO2WiLJmnCg9MHyp26uU5CEuIalrQpZ0TX1A5PQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-star@3.3.0: + resolution: {integrity: sha512-RX9RLuJ9oWQbOVvVyiOBdPK8dc+RLc7DaqEOxGhMTPQeGvryjdkBU/FmiG4a7KaVyZeCI2diDW4oWEkulzZIIg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/shape-text@3.3.0: + resolution: {integrity: sha512-FVDa9Hx/r59KAE9LY7JiHYv3IjSeUY/w7w6b9gQ63ng0NjQwkGV627UHYYX+qYZc6q1xaO5BFVKrSi9TS/3IeQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/slim@3.3.0: + resolution: {integrity: sha512-/FAbB4b9/j7xaZYuGx+uU4rDLrLs7zEShwFHDWc4PWn/970CX+EvKszqNrBvQDuqDD3HZQ94iCwj7w9OWKXLTg==} + dependencies: + '@tsparticles/basic': 3.3.0 + '@tsparticles/engine': 3.3.0 + '@tsparticles/interaction-external-attract': 3.3.0 + '@tsparticles/interaction-external-bounce': 3.3.0 + '@tsparticles/interaction-external-bubble': 3.3.0 + '@tsparticles/interaction-external-connect': 3.3.0 + '@tsparticles/interaction-external-grab': 3.3.0 + '@tsparticles/interaction-external-pause': 3.3.0 + '@tsparticles/interaction-external-push': 3.3.0 + '@tsparticles/interaction-external-remove': 3.3.0 + '@tsparticles/interaction-external-repulse': 3.3.0 + '@tsparticles/interaction-external-slow': 3.3.0 + '@tsparticles/interaction-particles-attract': 3.3.0 + '@tsparticles/interaction-particles-collisions': 3.3.0 + '@tsparticles/interaction-particles-links': 3.3.0 + '@tsparticles/move-parallax': 3.3.0 + '@tsparticles/plugin-easing-quad': 3.3.0 + '@tsparticles/shape-emoji': 3.3.0 + '@tsparticles/shape-image': 3.3.0 + '@tsparticles/shape-line': 3.3.0 + '@tsparticles/shape-polygon': 3.3.0 + '@tsparticles/shape-square': 3.3.0 + '@tsparticles/shape-star': 3.3.0 + '@tsparticles/updater-life': 3.3.0 + '@tsparticles/updater-rotate': 3.3.0 + '@tsparticles/updater-stroke-color': 3.3.0 + dev: false + + /@tsparticles/updater-color@3.3.0: + resolution: {integrity: sha512-4ZggZr4jTXXOCLXqMXkH/jfhylf9wLt2G7D/F9ZZPihh8l8F2x0YM/JvzRePynhIFXfZaMD1PRfdXNTr6HnFFQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-destroy@3.3.0: + resolution: {integrity: sha512-9yM0bQI++cBoPsG5UL33p63Hw3bidEG5rGox4Yqy+9RbckAe+kdRLcCk2PxCQI01KxRTczdsIGBtDNTYG8U9dQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-life@3.3.0: + resolution: {integrity: sha512-6DDx4FfezLmXxetVx0kFZdWKWLIPa/ujFxHto0fFIVFtjLaffJPEONoOIj6/TmAlcJ+XF2jY2Md4z6vyS6bMlA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-opacity@3.3.0: + resolution: {integrity: sha512-aQZJheqvoD69YYPiSlcRuWU7yEPs9dSmeOALP+fcaQwUQbVvr+wNJSUVkVNzeawtv4tPwou4QnytoWaBmZoqog==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-out-modes@3.3.0: + resolution: {integrity: sha512-G+UDZO6pmBUdSeT1Y7SRXvZz2EUw5RBCF8AOQMyLntehJQgLPc+PbMCFenfjpRQCCiWQ8RSumZ040iv5CLRUug==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-roll@3.3.0: + resolution: {integrity: sha512-z4UNZnC1/ZtXRZqMMITjqTxjs+qhggoL2W6c6AjvQ9TUyz+Ixg8tIrcPcwUu69496o9HJf6mJ4C3G9Pb9CMm7Q==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-rotate@3.3.0: + resolution: {integrity: sha512-4i3+0rbvzmaNGunlK443kURoEVFeAvCY5VGNX73y8S5g94RFejtGYBUUsC/LAcCxgfxa3HgYwNTT6ypslnoNuw==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-size@3.3.0: + resolution: {integrity: sha512-8s0dSh8bV4CN13oM86x1MPkI1T6KwuKPIiSdTcO1qKTcN1WBYzuuIPOU7Q3+fbQhSZ6F+da3zdG9unqU5sPYUA==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-stroke-color@3.3.0: + resolution: {integrity: sha512-swo8nbIQsMJa5kGkaZF4Fq1XekKNqTj3n8T921kQOdkkz/nmL8U3/ikdRUpW/OiZgvULTnihYnDtTtiMtLmcaQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-tilt@3.3.0: + resolution: {integrity: sha512-ALcz+lsdaZn3pZkBRQssF55DVVQf0nX7rXCn6dhgIcwvpTSU1Fm5wYP2Q7cr6UDOu1lOAk5BHEQaG2EgHTanMQ==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-twinkle@3.3.0: + resolution: {integrity: sha512-ht5GaFrk4F2vva7T/ZnSpKT2+RROjR/jSlZ+Gt+Zmj3xycfSyBwFKQkI0tqYQXClr5/OOuJGfWWb/bcU198Weg==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + + /@tsparticles/updater-wobble@3.3.0: + resolution: {integrity: sha512-S9TpaGCWUnfFsk/ZVQVW+KrBG5mkTbbrj6lUx8OuhJmAft6v6zKVByhrMN8LIxYwr8S6mGmguOfFt/ZG2//xkw==} + dependencies: + '@tsparticles/engine': 3.3.0 + dev: false + /@types/acorn@4.0.6: resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} dependencies: @@ -5148,6 +5442,24 @@ packages: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} dev: false + /tsparticles@3.3.0: + resolution: {integrity: sha512-Dvd5nIvc7OcbmBZZcZo225Bsiu3k+FZJXoBZDmla4QTDwJvt7GSthrenvnpElBiL8VE+JS2N3t7sGJW2TQGt5A==} + dependencies: + '@tsparticles/engine': 3.3.0 + '@tsparticles/interaction-external-trail': 3.3.0 + '@tsparticles/plugin-absorbers': 3.3.0 + '@tsparticles/plugin-emitters': 3.3.0 + '@tsparticles/plugin-emitters-shape-circle': 3.3.0 + '@tsparticles/plugin-emitters-shape-square': 3.3.0 + '@tsparticles/shape-text': 3.3.0 + '@tsparticles/slim': 3.3.0 + '@tsparticles/updater-destroy': 3.3.0 + '@tsparticles/updater-roll': 3.3.0 + '@tsparticles/updater-tilt': 3.3.0 + '@tsparticles/updater-twinkle': 3.3.0 + '@tsparticles/updater-wobble': 3.3.0 + dev: false + /tsscmp@1.0.6: resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==} engines: {node: '>=0.6.x'} diff --git a/src/components/hero.js b/src/components/hero.js index da50f0a..43d9f32 100644 --- a/src/components/hero.js +++ b/src/components/hero.js @@ -1,12 +1,12 @@ -import ReactCanvasNest from 'react-canvas-nest'; import Typewriter from 'typewriter-effect'; +import Particles from './particles'; export default function Hero() { return ( <> -
- {/* */} -
+
+ +

Your potential.
Our passion.

diff --git a/src/components/particles.jsx b/src/components/particles.jsx new file mode 100644 index 0000000..c1161d7 --- /dev/null +++ b/src/components/particles.jsx @@ -0,0 +1,112 @@ +"use client" + +import { useEffect, useMemo, useState } from "react"; +import Particles, { initParticlesEngine } from "@tsparticles/react"; +import { loadFull } from "tsparticles"; + +export default function ParticlesAnimation() { + + const [init, setInit] = useState(false); + + useEffect(() => { + initParticlesEngine(async (engine) => { + // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets + // this loads the tsparticles package bundle, it's the easiest method for getting everything ready + // starting from v2 you can add only the features you need reducing the bundle size + //await loadAll(engine); + //await loadFull(engine); + await loadFull(engine); + //await loadBasic(engine); + }).then(() => { + setInit(true); + }); + }, []); + + const particlesLoaded = (container) => { + console.log(container); + }; + + const options = useMemo( + () => ({ + background: { + color: { + value: "#ffffff", + }, + }, + style:{position:"absolute", zIndex: -99}, + fpsLimit: 120, + interactivity: { + events: { + onClick: { + enable: true, + mode: "push", + }, + onHover: { + enable: true, + mode: "repulse", + }, + }, + modes: { + push: { + quantity: 4, + }, + repulse: { + distance: 200, + duration: 0.4, + }, + }, + }, + particles: { + color: { + value: "#6f0eb0", + }, + links: { + color: "#5e4270", + distance: 150, + enable: true, + opacity: 0.5, + width: 1, + }, + move: { + direction: "none", + enable: true, + outModes: { + default: "bounce", + }, + random: false, + speed: 6, + straight: false, + }, + number: { + density: { + enable: true, + }, + value: 80, + }, + opacity: { + value: 0.5, + }, + shape: { + type: "circle", + }, + size: { + value: { min: 1, max: 5 }, + }, + }, + detectRetina: true, + }), + [], + ); + + if (init) { + return ( + + ); + } + + return <>; +} \ No newline at end of file