From d1b446c82d2d6c40371bc5b8fd007c26ad62f236 Mon Sep 17 00:00:00 2001 From: Mike Odnis Date: Tue, 1 Oct 2024 17:39:33 -0400 Subject: [PATCH] feat: liveblocks intergration, and custom cursor --- package.json | 1 + public/assets/svgs/cursor.svg | 22 +- src/app/_components/liveblocks/ChatHint.tsx | 41 --- src/app/_components/liveblocks/Cursor.tsx | 63 ++-- .../liveblocks/FlyingReaction.module.css | 96 ------ .../_components/liveblocks/FlyingReaction.tsx | 23 -- .../liveblocks/ReactionSelector.tsx | 42 --- src/app/_components/liveblocks/index.ts | 2 - src/app/loading.tsx | 89 +---- src/app/page.tsx | 2 +- src/components/client/Loader.tsx | 98 +++++- src/components/github/PinnedRepos.tsx | 20 +- src/components/layout/Layout.tsx | 49 +-- src/components/layout/MobileNav.tsx | 4 +- src/lib/getContrastingColor.ts | 51 +++ src/providers/Providers.tsx | 6 +- src/providers/core/CustomAnimatedCursor.tsx | 62 ++++ src/providers/core/LiveRoom.tsx | 322 +++--------------- src/providers/core/index.ts | 1 + 19 files changed, 338 insertions(+), 656 deletions(-) delete mode 100644 src/app/_components/liveblocks/ChatHint.tsx delete mode 100644 src/app/_components/liveblocks/FlyingReaction.module.css delete mode 100644 src/app/_components/liveblocks/FlyingReaction.tsx delete mode 100644 src/app/_components/liveblocks/ReactionSelector.tsx create mode 100644 src/lib/getContrastingColor.ts create mode 100644 src/providers/core/CustomAnimatedCursor.tsx diff --git a/package.json b/package.json index ecfd171..dfaa361 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "nextjs-progressbar": "^0.0.16", "node-fetch": "^3.3.2", "react": "^18.3.1", + "react-animated-cursor": "^2.11.2", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-icons": "^5.3.0", diff --git a/public/assets/svgs/cursor.svg b/public/assets/svgs/cursor.svg index 6fc7366..8c51b61 100644 --- a/public/assets/svgs/cursor.svg +++ b/public/assets/svgs/cursor.svg @@ -1,17 +1,17 @@ - + - - - - - - - - - + + + + + + + + + - + diff --git a/src/app/_components/liveblocks/ChatHint.tsx b/src/app/_components/liveblocks/ChatHint.tsx deleted file mode 100644 index 18f3329..0000000 --- a/src/app/_components/liveblocks/ChatHint.tsx +++ /dev/null @@ -1,41 +0,0 @@ -'use client'; - -import { X } from 'lucide-react'; -import { useEffect, useState } from 'react'; - -export function ChatHint() { - const [isVisible, setIsVisible] = useState(true); - - useEffect(() => { - const timer = setTimeout(() => { - setIsVisible(false); - }, 10000); // Hide after 10 seconds - - return () => clearTimeout(timer); - }, []); - - if (!isVisible) return null; - - return ( -
- -

Chat with Others!

-

- Press / {' '} - to start chatting, - - Shift+E - {' '} - for reactions, and - Esc{' '} - to exit. -

-
- ); -} diff --git a/src/app/_components/liveblocks/Cursor.tsx b/src/app/_components/liveblocks/Cursor.tsx index 3b6d702..ac8550b 100644 --- a/src/app/_components/liveblocks/Cursor.tsx +++ b/src/app/_components/liveblocks/Cursor.tsx @@ -1,43 +1,50 @@ -import React from 'react'; +import React from "react"; type Props = { color: string; x: number; y: number; - message?: string; }; -export default function Cursor({ color, x, y, message }: Props) { + +export default function Cursor({ color, x, y }: Props) { return ( -
- + + + + + + + + + + + + + + + + + + + + + + + - {message && ( -
-

{message}

-
- )} -
); } diff --git a/src/app/_components/liveblocks/FlyingReaction.module.css b/src/app/_components/liveblocks/FlyingReaction.module.css deleted file mode 100644 index ccf709e..0000000 --- a/src/app/_components/liveblocks/FlyingReaction.module.css +++ /dev/null @@ -1,96 +0,0 @@ -.goUp0 { - opacity: 0; - animation: goUpAnimation0 2s, fadeOut 2s; -} - -@keyframes goUpAnimation0 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(0px, -400px); - } -} - -.goUp1 { - opacity: 0; - animation: goUpAnimation1 2s, fadeOut 2s; -} - -@keyframes goUpAnimation1 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(0px, -300px); - } -} - -.goUp2 { - opacity: 0; - animation: goUpAnimation2 2s, fadeOut 2s; -} - -@keyframes goUpAnimation2 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(0px, -200px); - } -} - -.leftRight0 { - animation: leftRightAnimation0 0.3s alternate infinite ease-in-out; -} - -@keyframes leftRightAnimation0 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(50px, 0px); - } -} - -.leftRight1 { - animation: leftRightAnimation1 0.3s alternate infinite ease-in-out; -} - -@keyframes leftRightAnimation1 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(100px, 0px); - } -} - -.leftRight2 { - animation: leftRightAnimation2 0.3s alternate infinite ease-in-out; -} - -@keyframes leftRightAnimation2 { - from { - transform: translate(0px, 0px); - } - - to { - transform: translate(-50px, 0px); - } -} - -@keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} diff --git a/src/app/_components/liveblocks/FlyingReaction.tsx b/src/app/_components/liveblocks/FlyingReaction.tsx deleted file mode 100644 index 2f74d14..0000000 --- a/src/app/_components/liveblocks/FlyingReaction.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import styles from './FlyingReaction.module.css'; - -type Props = { - x: number; - y: number; - timestamp: number; - value: string; -}; - -export default function FlyingReaction({ x, y, timestamp, value }: Props) { - return ( -
-
-
{value}
-
-
- ); -} diff --git a/src/app/_components/liveblocks/ReactionSelector.tsx b/src/app/_components/liveblocks/ReactionSelector.tsx deleted file mode 100644 index 4ed15b4..0000000 --- a/src/app/_components/liveblocks/ReactionSelector.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -type Props = { - setReaction: (reaction: string) => void; -}; - -export default function ReactionSelector({ setReaction }: Props) { - return ( -
e.stopPropagation()} - > - - - - - - -
- ); -} - -function ReactionButton({ - reaction, - onSelect, -}: { - reaction: string; - onSelect: (reaction: string) => void; -}) { - return ( - - ); -} diff --git a/src/app/_components/liveblocks/index.ts b/src/app/_components/liveblocks/index.ts index 1e1d90d..8eef024 100644 --- a/src/app/_components/liveblocks/index.ts +++ b/src/app/_components/liveblocks/index.ts @@ -1,3 +1 @@ export * from './Cursor'; -export * from './FlyingReaction'; -export * from './ReactionSelector'; diff --git a/src/app/loading.tsx b/src/app/loading.tsx index 10489d5..ac5e9a8 100644 --- a/src/app/loading.tsx +++ b/src/app/loading.tsx @@ -1,94 +1,13 @@ 'use client'; -import Particles from '@/components/magicui/particles'; -import Image from 'next/image'; +import { Loader } from '@/components/client/Loader'; import React from 'react'; const Loading = React.memo(() => { return ( -
- -
-
-
- Loading... -
-
- -
+ <> + + ); }); diff --git a/src/app/page.tsx b/src/app/page.tsx index a37db86..ce7ffcc 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -19,7 +19,7 @@ export default async function Home() {
-

Mike Odnis

+

Mike Odnis

Undergraduate Computer Science Student

Passionate about web development and open source. Currently studying at Farmingdale diff --git a/src/components/client/Loader.tsx b/src/components/client/Loader.tsx index 110c121..02b9ae9 100644 --- a/src/components/client/Loader.tsx +++ b/src/components/client/Loader.tsx @@ -2,26 +2,92 @@ import Image from 'next/image'; import type React from 'react'; +import Particles from '../magicui/particles'; export const Loader: React.FC = () => { return ( - <> -

- <> +
+ +
+
- - Loading... + Loading... +
- + +
); }; diff --git a/src/components/github/PinnedRepos.tsx b/src/components/github/PinnedRepos.tsx index 7465c36..0b501d1 100644 --- a/src/components/github/PinnedRepos.tsx +++ b/src/components/github/PinnedRepos.tsx @@ -15,9 +15,9 @@ interface PinnedReposProps { export default function PinnedRepos({ pinnedRepos, isLoading = false }: PinnedReposProps) { return ( -
+

Pinned Projects

-
+
{isLoading ? Array.from({ length: 6 }).map((_, index) => ( @@ -42,8 +42,8 @@ export default function PinnedRepos({ pinnedRepos, isLoading = false }: PinnedRe key={`repo-${index + 1}`} className="h-full bg-[#1E1E1E] border border-purple-800 hover:shadow-md transition-shadow duration-300" > - - + + - + {repo.description} - -
+ +
@@ -70,7 +70,7 @@ export default function PinnedRepos({ pinnedRepos, isLoading = false }: PinnedRe
-

Stars

+

Stars

 @@ -83,7 +83,7 @@ export default function PinnedRepos({ pinnedRepos, isLoading = false }: PinnedRe
-

Forks

+

Forks

 @@ -91,7 +91,7 @@ export default function PinnedRepos({ pinnedRepos, isLoading = false }: PinnedRe {repo.primaryLanguage && ( {repo.primaryLanguage.name} diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 0062d94..4e26d0a 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -4,10 +4,11 @@ import Palette from '@/components/CMD'; import BlurryBlob from '@/components/animation/background/blurry-blob'; import Footer from '@/components/layout/Footer'; import { DotPattern } from '@/components/magicui'; -import { LiveBlocksProvider } from '@/providers'; +// import { LiveBlocksProvider } from '@/providers/core/LiveRoom'; import { usePathname } from 'next/navigation'; import MobileNavBar from './MobileNav'; import NavBar from './Nav'; + export default function Layout({ children, }: Readonly<{ @@ -16,31 +17,31 @@ export default function Layout({ const pathname = usePathname(); return ( <> - <> -
-
- - -
-
- -
-
- -
-
- -
-
{children}
+
+
+ + +
+
+ +
+
+
-
-
+
+ {children} +
+
+
+
+
+
- +
); } diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx index 9193172..cf579e5 100644 --- a/src/components/layout/MobileNav.tsx +++ b/src/components/layout/MobileNav.tsx @@ -10,9 +10,9 @@ export default function MobileNavBar({ path }: { path: string }) { const router = useRouter(); return ( -