diff --git a/package-lock.json b/package-lock.json index bbec8bf..73e6134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,6 @@ "next": "^14.0.3", "next-auth": "^4.24.5", "next-cloudinary": "^5.13.0", - "next-themes": "^0.2.1", "prisma": "^5.7.0", "react": "18.2.0", "react-dom": "18.2.0", @@ -2972,16 +2971,6 @@ "react": "^17 || ^18" } }, - "node_modules/next-themes": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz", - "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==", - "peerDependencies": { - "next": "*", - "react": "*", - "react-dom": "*" - } - }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index 84dd660..f2abb48 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "next": "^14.0.3", "next-auth": "^4.24.5", "next-cloudinary": "^5.13.0", - "next-themes": "^0.2.1", "prisma": "^5.7.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/src/app/(pages)/dashboard/_components/user-input-form.tsx b/src/app/(pages)/dashboard/_components/User-form.tsx similarity index 67% rename from src/app/(pages)/dashboard/_components/user-input-form.tsx rename to src/app/(pages)/dashboard/_components/User-form.tsx index e334343..7172dd6 100644 --- a/src/app/(pages)/dashboard/_components/user-input-form.tsx +++ b/src/app/(pages)/dashboard/_components/User-form.tsx @@ -9,16 +9,17 @@ import { useState } from "react" import { FaDeleteLeft, FaPlus } from "react-icons/fa6" import classNames from "classnames" -import { inputFieldDetails } from "@/lib/constants/profile-input-details-list" +import { INPUT_FIELDS_DETAILS } from "@/lib/constants/profile-input-details-list" +import { BACKGROUND_OPTIONS } from "@/components/background/background" import { submitUserBio } from "@/actions/submit-user-bio" import { useData } from "@/hooks/useBioData" -const ShowDemoDataButton = dynamic(() => import("./buttons/show-demo-button")) -const PublishButton = dynamic(() => import("./buttons/publish-button")) -const GithubLinkButton = dynamic(() => import("./buttons/github-button")) -const PreviewButton = dynamic(() => import("./buttons/preview-button")) -const ResetButton = dynamic(() => import("./buttons/reset-button")) -const InputsField = dynamic(() => import("./profile-input-field")) +const ShowDemoDataButton = dynamic(() => import("./buttons/Show-demo-button")) +const PublishButton = dynamic(() => import("./buttons/Publish-button")) +const GithubLinkButton = dynamic(() => import("./buttons/Github-button")) +const PreviewButton = dynamic(() => import("./buttons/Preview-button")) +const ResetButton = dynamic(() => import("./buttons/Reset-button")) +const InputsField = dynamic(() => import("./input-field")) const Button = dynamic(() => import("@/components/ui/button").then((mod) => mod.Button)) const Separator = dynamic(() => import("@/components/ui/separator").then((mod) => mod.Separator)) const Checkbox = dynamic(() => import("@/components/ui/checkbox").then((mod) => mod.Checkbox)) @@ -37,6 +38,7 @@ export default function InputForm({ image }: TProps) { toggleProfileImage, handleInputChange, removeProject, + // selectBg, } = useData(); @@ -64,14 +66,14 @@ export default function InputForm({ image }: TProps) { // action={async () => await submitUserBio(userBio)} className={classNames({ "overflow-scroll": true, - "h-[84vh] w-fit p-4": true, + "h-[84vh] w-[50vw] p-4": true, "border-2 border-zinc-400 rounded-xl": true, })} > {/* profile image */}
- {inputFieldDetails.map((det) => ( + {INPUT_FIELDS_DETAILS.map((det) => ( {userBioData.projectLinks.map((link, idx) => ( -
- - {link} - - - removeProject(idx)} - className={classNames({ - "hover:scale-110 transition ease-out": true, - "cursor-pointer": true, - })} - /> -
+ removeProject(idx)} + /> ))}
+ {/* BG CHOOSNG BUTTONS */} + {/*
+

Choose Background

+ +
+ {BACKGROUND_OPTIONS.map((bgDetails) => ( + + ))} +
+
*/} + + {/* footer buttons */}
) } + + + +function ProjectDisplayMockup( + { link, removeProject }: { link: string, removeProject: (idx: number) => void } +) { + return ( +
+ + {link} + + + +
+ ) +} \ No newline at end of file diff --git a/src/app/(pages)/dashboard/_components/profile-input-field.tsx b/src/app/(pages)/dashboard/_components/input-field.tsx similarity index 97% rename from src/app/(pages)/dashboard/_components/profile-input-field.tsx rename to src/app/(pages)/dashboard/_components/input-field.tsx index 4e3fd0f..95ac58c 100644 --- a/src/app/(pages)/dashboard/_components/profile-input-field.tsx +++ b/src/app/(pages)/dashboard/_components/input-field.tsx @@ -40,7 +40,7 @@ export default function InputFields({ })}> diff --git a/src/app/(pages)/dashboard/_components/mobile-preview.tsx b/src/app/(pages)/dashboard/_components/mobile-preview.tsx index 3ecf92d..d9e64f6 100644 --- a/src/app/(pages)/dashboard/_components/mobile-preview.tsx +++ b/src/app/(pages)/dashboard/_components/mobile-preview.tsx @@ -5,7 +5,7 @@ import dynamic from "next/dynamic"; import Link from "next/link"; import classNames from "classnames"; import { type IconType } from "react-icons"; -import { AiOutlineMail, } from "react-icons/ai"; +import { AiOutlineBgColors, AiOutlineMail, } from "react-icons/ai"; import { FaDiscord, FaTwitter, @@ -21,6 +21,9 @@ import { import { useData } from "@/hooks/useBioData"; import { useUser } from "@/hooks/useUser"; import { inter } from "@/lib/fonts"; +import { BACKGROUND_OPTIONS } from "@/components/background/background"; +import { TBackgroundOptions } from "types"; +import { ReactNode } from "react"; const ScrollArea = dynamic(() => import("@/components/ui/scroll-area").then(mod => mod.ScrollArea)) @@ -36,6 +39,7 @@ export default function MobilePreview() { githubLink, linkedinLink, name, + // bgCode, portfolioLink, projectLinks, twitterLink, @@ -48,6 +52,15 @@ export default function MobilePreview() { } = userBioData; + // find bg component from code + // const SELECTED_idx = BACKGROUND_OPTIONS?.find((opt) => opt.code === bgCode); + + // const Sbg = () => { + // if (SELECTED_idx) return SELECTED_idx.BackGround; + // else return null + // } + + // checking if fields are empty or not function isBioEmpty() { return ( @@ -70,148 +83,162 @@ export default function MobilePreview() { {isBioEmpty() ? (

No Information

) : ( -
- {displayProfile && ( - Profile Picture - )} - - {name && ( -

- {name} -

- )} - - - {/* DISPLAYING USER'S PROFILE LINKS */} -
- {email && ( - - - {email} - + <> + {/* {Sbg && } */} +
+ {displayProfile && ( + Profile Picture )} - - {portfolioLink && ( - - - {portfolioLink.slice(8, 50) + "..."} - + {name && ( +

+ MySelf,
+ {name} +

)} -
- {/* DISPLAYING 'BIO' OF USER */} - {bio && ( - -

About {name},

- -

- {bio} -

- - )} - - - {/* DISPLAYING SOCIAL LINKS */} -
-

Social Links

- -
- {linkedinLink && - + {email && ( + - } + )} - {twitterLink && - - } - {githubLink && - - } + )} +
- {discordLink && - - } - {mediumLink && ( - - )} + {/* DISPLAYING 'BIO' OF USER */} + {bio && ( + +

About me,

- {hashnodeLink && ( - - )} +

+ {bio} +

+ + )} - {devdotToLink && ( - - )} - {youtubeLink && - - } + {/* DISPLAYING SOCIAL LINKS */} +
+

Connect with me...

+ +
+ {linkedinLink && + + } + + {twitterLink && + + } + + {githubLink && + + } + + {discordLink && + + } + + {mediumLink && ( + + )} + + {hashnodeLink && ( + + )} + + {devdotToLink && ( + + )} + + {youtubeLink && + + } +
+
+ + +
+

Project Links

+ +
+ {userBioData.projectLinks.map((link, idx) => ( + + {idx + 1}{". "}{link.replace("https://", "")} + + ))} +
-
+ )}
@@ -219,7 +246,9 @@ export default function MobilePreview() { } -function SocialLinks( + + +function SocialLinkMockup( { href, label, Icon }: { href: string, label: string, Icon: IconType } ) { return ( @@ -237,4 +266,22 @@ function SocialLinks( {label} ) +} + + +function PersonalLinkMockup( + { link, label, Icon }: { link: string, label: string, Icon: IconType } +) { + return ( + + + {label} + + ) } \ No newline at end of file diff --git a/src/app/(pages)/dashboard/page.tsx b/src/app/(pages)/dashboard/page.tsx index 2fa9155..53f9561 100644 --- a/src/app/(pages)/dashboard/page.tsx +++ b/src/app/(pages)/dashboard/page.tsx @@ -5,7 +5,7 @@ import classNames from "classnames"; import { getServerAuthSession } from "@/server/auth" import { montserrat } from "@/lib/fonts"; -const InputForm= dynamic(() => import("./_components/user-input-form")) +const InputForm= dynamic(() => import("./_components/User-form")) const MobilePreview= dynamic(() => import("./_components/mobile-preview")) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a718e21..6736ade 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,7 @@ import { type Metadata } from "next"; import ContextProvider from "@/components/shared/ContextProvider"; import { AuthProvider } from "@/components/shared/AuthProvider"; -import Navbar from "@/components/shared/Navbar"; +import Navbar from "@/components/layout/Navbar"; import { inter } from "@/lib/fonts"; import type { ILayout } from "types" import "@/styles/globals.css" diff --git a/src/components/background/background.tsx b/src/components/background/background.tsx new file mode 100644 index 0000000..d0a5736 --- /dev/null +++ b/src/components/background/background.tsx @@ -0,0 +1,149 @@ +// original source: https://github.com/ibelick/background-snippets/blob/main/app/BackGrounds/background.tsx + +import type { TBackgroundOptions } from "types"; + +/* eslint-disable tailwindcss/no-contradicting-className */ +const BgTheme1 = () => { + return
; +}; + +const BgTheme8 = () => { + return ( +
+
+
+ ); +}; + +const BgTheme2 = () => { + return ( +
+
+
+ ); +}; + +const BgTheme9 = () => { + return ( +
+ ); +}; + +const BgTheme7 = () => { + return ( +
+
+
+ ); +}; + +const BgTheme10 = () => { + return ( +
+
+
+ ); +}; +const BgTheme11 = () => { + return ( +
+ ); +}; + +const BgTheme12 = () => { + return ( +
+ ); +}; + +const BgTheme4 = () => { + return ( +
+ ); +}; + +const BgTheme5 = () => { + return ( +
+
+
+ ); +}; + +const BgTheme6 = () => { + return ( +
+ ); +}; + +const BgTheme3 = () => { + return ( +
+
+
+ ); +}; + + +export const BACKGROUND_OPTIONS: TBackgroundOptions[] = [ + { + code: '#FFFFFF', + BackGround: , + label: 'WhiteCanvas', + }, + { + code: '#4F4F4F', + BackGround: , + label: 'ShadowyGray', + }, + { + code: '#C9EBFF', + BackGround: , + label: 'LinearSky', + }, + { + code: '#E6E7EB', + BackGround: , + label: 'SubtleGrayDots', + }, + { + code: '#FF00FF', + BackGround: , + label: 'BlurredFuchsia', + }, + { + code: '#E5E7EB', + BackGround: , + label: 'MaskedGray', + }, + { + code: '#808080', + BackGround: , + label: 'GradientGrid', + }, + { + code: '#F0F0F0', + BackGround: , + label: 'LightGrayLines', + }, + { + code: '#00A3FF', + BackGround: , + label: 'RadiantBlue', + }, + { + code: '#AD6DF4', + BackGround: , + label: 'GradientOrb', + }, + { + code: '#63E', + BackGround: , + label: 'RadialHalo', + }, + { + code: '#D5C5FF', + BackGround: , + label: 'VividCircles', + }, +] as const; \ No newline at end of file diff --git a/src/components/shared/Navbar.tsx b/src/components/layout/Navbar.tsx similarity index 98% rename from src/components/shared/Navbar.tsx rename to src/components/layout/Navbar.tsx index ad22eee..8bcb518 100644 --- a/src/components/shared/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -8,7 +8,7 @@ import classNames from "classnames"; import { code } from "@/lib/fonts" import { useUser } from "@/hooks/useUser"; -const Logo = dynamic(() => import("./Logo")) +const Logo = dynamic(() => import("../shared/Logo")) const Button = dynamic(() => import("@/components/ui/button").then((mod) => mod.Button)) const Dialog = dynamic(() => import("@/components/ui/dialog").then((mod) => mod.Dialog)) const DialogContent = dynamic(() => import("@/components/ui/dialog").then((mod) => mod.DialogContent)) diff --git a/src/components/themes/ThemeWrapper.tsx b/src/components/themes/ThemeWrapper.tsx deleted file mode 100644 index 8c90fbc..0000000 --- a/src/components/themes/ThemeWrapper.tsx +++ /dev/null @@ -1,9 +0,0 @@ -"use client" - -import * as React from "react" -import { ThemeProvider as NextThemesProvider } from "next-themes" -import { type ThemeProviderProps } from "next-themes/dist/types" - -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - return {children} -} diff --git a/src/components/themes/theme-toggle.tsx b/src/components/themes/theme-toggle.tsx deleted file mode 100644 index 5f62ec4..0000000 --- a/src/components/themes/theme-toggle.tsx +++ /dev/null @@ -1,53 +0,0 @@ -"use client" - -import { MoonIcon, SunIcon } from "lucide-react" -import { useTheme } from "next-themes" -import classNames from "classnames" -import dynamic from "next/dynamic" - -import { Button } from "@/components/ui/button" - -const DropdownMenu= dynamic(() => import("@/components/ui/dropdown-menu").then((mod) => mod.DropdownMenu)) -const DropdownMenuContent= dynamic(() => import("@/components/ui/dropdown-menu").then((mod) => mod.DropdownMenuContent)) -const DropdownMenuItem= dynamic(() => import("@/components/ui/dropdown-menu").then((mod) => mod.DropdownMenuItem)) -const DropdownMenuTrigger= dynamic(() => import("@/components/ui/dropdown-menu").then((mod) => mod.DropdownMenuTrigger)) - - - -export function ModeToggle() { - const { setTheme } = useTheme() - - return ( - - - - - - setTheme("light")}> - Light - - setTheme("dark")}> - Dark - - setTheme("system")}> - System - - - - ) -} diff --git a/src/lib/constants/context-data.ts b/src/lib/constants/context-data.ts index 35fa140..3f090e6 100644 --- a/src/lib/constants/context-data.ts +++ b/src/lib/constants/context-data.ts @@ -1,7 +1,7 @@ import type { TUserBio } from "types"; -export const initialData: TUserBio = { +export const INITIAL_DATA: TUserBio = { name: "", email: "", bio: "", @@ -17,9 +17,10 @@ export const initialData: TUserBio = { hashnodeLink: "", mediumLink: "", projectLinks: [], + // bgCode: null, }; -export const demoData: TUserBio = { +export const DEMO_DATA: TUserBio = { name: "Rohit Mondal", displayProfile: true, profilePicLink: "https://avatars.githubusercontent.com/u/107113353?v=4", @@ -35,4 +36,5 @@ export const demoData: TUserBio = { hashnodeLink: "https://hashnode.com/@rohitmondall8000", mediumLink: "https://medium.com/@prashant.kumar2_7782", projectLinks: ["https://opentyped-nextjs.vercel.app/", "https://imagewall.vercel.app/"], + // bgCode: "#C9EBFF" } \ No newline at end of file diff --git a/src/lib/constants/profile-input-details-list.ts b/src/lib/constants/profile-input-details-list.ts index 6886d11..66964e5 100644 --- a/src/lib/constants/profile-input-details-list.ts +++ b/src/lib/constants/profile-input-details-list.ts @@ -1,6 +1,19 @@ import { type IconType } from "react-icons"; import { AiFillMail } from "react-icons/ai" -import { FaYoutube, FaUser, FaTextHeight, FaGithub, FaLinkedin, FaTwitter, FaLink, FaDiscord, FaHashnode, FaDev, FaMedium } from "react-icons/fa6" +import { + FaYoutube, + FaUser, + FaTextHeight, + FaGithub, + FaLinkedin, + FaTwitter, + FaLink, + FaDiscord, + FaHashnode, + FaDev, + FaMedium +} from "react-icons/fa6" + import type { TUserBio } from "types"; @@ -20,7 +33,7 @@ const COMMON_DETAIL = (input: string) => { } -export const inputFieldDetails: TInputDetailProps[] = [ +export const INPUT_FIELDS_DETAILS: TInputDetailProps[] = [ { id: "name", inputType: "Input", diff --git a/src/lib/context/user-bio-context.tsx b/src/lib/context/user-bio-context.tsx index 863849f..3908fd8 100644 --- a/src/lib/context/user-bio-context.tsx +++ b/src/lib/context/user-bio-context.tsx @@ -1,7 +1,7 @@ import React, { createContext, useState } from 'react'; import type { TUserBio, ILayout } from 'types'; -import { initialData, demoData } from '@/lib/constants/context-data'; +import { INITIAL_DATA, DEMO_DATA } from '@/lib/constants/context-data'; interface IDataContextType { @@ -12,6 +12,7 @@ interface IDataContextType { toggleProfileImage: () => void, handleInputChange: (input: string, id: keyof TUserBio) => void, removeProject: (idx: number) => void, + // selectBg: (code: string) => void, } @@ -19,11 +20,11 @@ export const DataContext = createContext(undefined export const DataProvider = ({ children }: ILayout) => { - const [data, setData] = useState(initialData); + const [data, setData] = useState(INITIAL_DATA); // for showing demo data const showDemo = () => { - setData(demoData); + setData(DEMO_DATA); } // add project @@ -34,9 +35,9 @@ export const DataProvider = ({ children }: ILayout) => { })) } - // reset whole form + // resetting whole form to function reset() { - setData(initialData); + setData(INITIAL_DATA); } // include profile image or not @@ -44,6 +45,14 @@ export const DataProvider = ({ children }: ILayout) => { setData((prev) => ({ ...prev, displayProfile: !prev.displayProfile })) } + // selecting background + // function selectBg(code: string){ + // setData((prev) => ({ + // ...prev, + // bgCode: code, + // })) + // } + // changing events inputs function handleInputChange(input: string, id: keyof TUserBio) { if (id === "name") { @@ -92,6 +101,7 @@ export const DataProvider = ({ children }: ILayout) => { toggleProfileImage, handleInputChange, removeProject, + // selectBg }}> {children} diff --git a/src/styles/globals.css b/src/styles/globals.css index 2a6e00c..6d48dab 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -78,14 +78,18 @@ /* CUSTOM */ ::-webkit-scrollbar { - width: 0; /* Remove scrollbar space */ + width: 5px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } /* Optional: show position indicator in red */ -::-webkit-scrollbar-thumb { - background: #FF0000; +/* ::-webkit-scrollbar-thumb { + background: rgb(198, 198, 198); } +::-webkit-scrollbar-button{ + width: 1px; +} */ + .btn { @apply font-bold; } diff --git a/types.d.ts b/types.d.ts index f0e0a5e..fb40e2a 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,9 +1,16 @@ import { UserBio } from "@prisma/client" +import { ReactNode } from "react" interface ILayout { children: ReactNode } +type TBackgroundOptions = { + code: string, + BackGround: JSX.Element, + label: string, +} + type TUserBio = { name: string email: string @@ -18,6 +25,7 @@ type TUserBio = { hashnodeLink: string, mediumLink: string, devdotToLink: string, - projectLinks: string[] - displayProfile: boolean + projectLinks: string[], + displayProfile: boolean, + // bgCode: string | null, } \ No newline at end of file