From 59be8178a688a3b2837e8cc5b784d40395fac9cd Mon Sep 17 00:00:00 2001 From: VineeTagarwaL-code Date: Sat, 2 Nov 2024 20:27:43 +0530 Subject: [PATCH] [feat]: mobile dock added --- src/app/page.tsx | 6 +- src/components/About.tsx | 2 +- src/components/Footer.tsx | 2 +- src/components/Heading.tsx | 2 +- src/components/Navbar.tsx | 14 +- src/components/cards/Blog-card.tsx | 2 +- src/components/introduction.tsx | 2 +- src/components/theme-toggle.tsx | 2 +- src/components/ui/Dock.tsx | 101 -------------- src/components/ui/dock.tsx | 167 ++++++++++++++++++++++++ src/components/{ => ui}/title-hover.tsx | 0 src/components/width-wrapper.tsx | 17 --- src/data/info.tsx | 4 +- 13 files changed, 185 insertions(+), 136 deletions(-) delete mode 100644 src/components/ui/Dock.tsx create mode 100644 src/components/ui/dock.tsx rename src/components/{ => ui}/title-hover.tsx (100%) delete mode 100644 src/components/width-wrapper.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index bd14165..4873712 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,14 +9,16 @@ import { BlurDiv } from "@/components/ui/Blur"; import { DELAY } from "@/constants/misc"; export default function Home() { return ( -
+
BLOGS -
+ +
+
); } diff --git a/src/components/About.tsx b/src/components/About.tsx index c070347..666fd2c 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -5,7 +5,7 @@ import { DATA } from "@/data/info"; import { GithubGraph } from "./ui/github"; export const About = ({ about }: { about: string }) => { return ( -
+

About

 diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 5ee4e45..a5f772e 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -21,7 +21,7 @@ export const Footer = () => { on twitter {" "}

- VINEET.TECH + VINEET.TECH ); }; diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx index b7f90da..1876f0f 100644 --- a/src/components/Heading.tsx +++ b/src/components/Heading.tsx @@ -14,7 +14,7 @@ export const Heading = ({ return (

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index cebff46..2b7309a 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,15 +1,13 @@ import { DATA } from "@/data/info"; -import { Dock } from "./ui/Dock"; +import { Dock } from "./ui/dock"; import React from "react"; export default function Navbar() { return ( -
-
- -
+ ); } diff --git a/src/components/cards/Blog-card.tsx b/src/components/cards/Blog-card.tsx index beab0f8..4a40ec6 100644 --- a/src/components/cards/Blog-card.tsx +++ b/src/components/cards/Blog-card.tsx @@ -1,6 +1,6 @@ "use client"; import getFormattedDate from "@/lib/formatdate"; -import { TitleHover } from "../title-hover"; +import { TitleHover } from "../ui/title-hover"; import Link from "next/link"; import { cn } from "@/lib/utils"; import { FileText } from "lucide-react"; diff --git a/src/components/introduction.tsx b/src/components/introduction.tsx index 1334931..54100c3 100644 --- a/src/components/introduction.tsx +++ b/src/components/introduction.tsx @@ -24,7 +24,7 @@ export const Introduction = ({ name, desc }: IntroductionProps) => { - + CN diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx index b126cd8..e736aac 100644 --- a/src/components/theme-toggle.tsx +++ b/src/components/theme-toggle.tsx @@ -16,7 +16,7 @@ export function ModeToggle() { variant="toggle" size="icon" onClick={toggleTheme} - className="border-l-[1px] border-solid border-gray-500 rounded-none pl-2" + className="md:border-l-[1px] md:border-solid border-gray-500 rounded-none md:pl-2" > diff --git a/src/components/ui/Dock.tsx b/src/components/ui/Dock.tsx deleted file mode 100644 index e412812..0000000 --- a/src/components/ui/Dock.tsx +++ /dev/null @@ -1,101 +0,0 @@ -"use client"; - -import { VariantProps, cva } from "class-variance-authority"; -import React, { useState } from "react"; -import { AnimatePresence, motion } from "framer-motion"; -import { cn } from "@/lib/utils"; -import { dataProps } from "@/data/info"; -import Link from "next/link"; -const dockVariants = cva( - "mx-auto w-max h-full p-2 flex items-end rounded-full border" -); - -export interface DockProps extends VariantProps { - className?: string; - navbar: dataProps; -} -const Dock = React.forwardRef( - ({ className, navbar }) => { - const [isBlurred, setIsBlurred] = useState(false); - const [isHovered, setIsHovered] = useState(false); - - const iconWidth = 40; - const totalIcons = navbar.navbar.socials.length * iconWidth + 35; - const handleMouseEnter = () => { - setIsBlurred(true); - setIsHovered(true); - setTimeout(() => { - setIsBlurred(false); - }, 300); - }; - const handleMouseLeave = () => { - setIsBlurred(true); - setIsHovered(false); - setTimeout(() => { - setIsBlurred(false); - }, 100); - }; - return ( - - - ; - - ); - } -); - -type DockIconProps = { - name: string; - link: string; - icon: React.ReactNode; -}; -const DockIcon = React.forwardRef( - ({ link, icon }) => { - return ( -
- {icon} -
- ); - } -); - -DockIcon.displayName = "DockIcon"; -Dock.displayName = "Dock"; - -export { Dock }; diff --git a/src/components/ui/dock.tsx b/src/components/ui/dock.tsx new file mode 100644 index 0000000..a967424 --- /dev/null +++ b/src/components/ui/dock.tsx @@ -0,0 +1,167 @@ +"use client"; + +import { VariantProps, cva } from "class-variance-authority"; +import React, { useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { cn } from "@/lib/utils"; +import { dataProps } from "@/data/info"; +import Link from "next/link"; + +export interface DockProps { + mobileClassName?: string; + DesktopClassName?: string; + navbar: dataProps; +} + +const Dock: React.FC = ({ + DesktopClassName, + navbar, + mobileClassName, +}) => { + return ( + <> + + + + ); +}; + +const DockMobile = React.forwardRef( + ({ mobileClassName, navbar }) => { + const [open, setOpen] = useState(false); + return ( +
+ + {open && ( + + {navbar.navbar.socials.map((social, idx) => ( + + + + ))} + + )} + +
setOpen(!open)} + className={cn( + "flex gap-4 items-end rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4", + mobileClassName + )} + > + + 🎒 + +
+
+ ); + } +); + +const DockDesktop = React.forwardRef( + ({ DesktopClassName, navbar }) => { + const [isBlurred, setIsBlurred] = useState(false); + const [isHovered, setIsHovered] = useState(false); + + const iconWidth = 40; + const totalIcons = navbar.navbar.socials.length * iconWidth + 35; + const handleMouseEnter = () => { + setIsBlurred(true); + setIsHovered(true); + setTimeout(() => { + setIsBlurred(false); + }, 300); + }; + const handleMouseLeave = () => { + setIsBlurred(true); + setIsHovered(false); + setTimeout(() => { + setIsBlurred(false); + }, 100); + }; + return ( +
+ + + 🎒 + {isHovered && ( + + {navbar.navbar.socials.map((social, idx) => ( + + ))} + + )} + + +
+ ); + } +); + +type DockIconProps = { + name: string; + link: string; + icon: React.ReactNode; + className?: string; +}; +const DockIcon = React.forwardRef( + ({ link, icon, className }) => { + return ( +
+ {icon} +
+ ); + } +); + +DockIcon.displayName = "DockIcon"; +Dock.displayName = "Dock"; + +export { Dock }; diff --git a/src/components/title-hover.tsx b/src/components/ui/title-hover.tsx similarity index 100% rename from src/components/title-hover.tsx rename to src/components/ui/title-hover.tsx diff --git a/src/components/width-wrapper.tsx b/src/components/width-wrapper.tsx deleted file mode 100644 index 4e07563..0000000 --- a/src/components/width-wrapper.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// import { cn } from "@/utils/utils"; -// type WidthWrapperProps = { -// children: React.ReactNode; -// className?: string; -// }; -// export const WidthWrapper = ({ children, className }: WidthWrapperProps) => { -// return ( -//
-// {children} -//
-// ); -// }; diff --git a/src/data/info.tsx b/src/data/info.tsx index 1c18688..6b4fba4 100644 --- a/src/data/info.tsx +++ b/src/data/info.tsx @@ -21,10 +21,10 @@ export const DATA: dataProps = { image: "https://www.vineet.tech/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage.a96af8f3.jpg&w=640&q=75", shortDescription: - "Software Engineer turned Entrepreneur. I love building things and helping people. Very active on Twitter.", + "Student Turned Software Engineer. I have a love for designs and building products. I like to code in 0's & 1's", githubUsername: "vineetagarwal-code", about: - "At the end of 2022, I quit my job as a software engineer to go fulltime into building and scaling my own SaaS businesses. In the past, [I pursued a double degree in computer science and business](/#education), [interned at big tech companies in Silicon Valley](https://www.youtube.com/watch?v=d-LJ2e5qKdE), and [competed in over 21 hackathons for fun](/#hackathons). I also had the pleasure of being a part of the first ever in-person cohort of buildspace called [buildspace sf1](https://buildspace.so/sf1).", + "At the end of 2023, I tried to change my life by learning to ACTUALLY code and I have been coding ever since, I have a nick for building cool looking designs and core backend systems. You can find me on twitter [@vineetwts](https://twitter.com/vineetwts) and on github [@vineetagarwal-code](https://github.com/vineetagarwal-code). I also happen to write and share sometimes and below are some of my blogs.", navbar: { socials: [ {