From 7a2d17ebd1fe729dba9a0458c19ce9d1dc5970c5 Mon Sep 17 00:00:00 2001 From: prajwal-dahat0810 Date: Sat, 2 Nov 2024 22:44:43 +0530 Subject: [PATCH] Created pricing page Signed-off-by: prajwal-dahat0810 --- app/(default)/pricing/page.tsx | 209 ++++++++++++++++++ app/api/automatic-test-generator/Mutation.ts | 4 +- app/api/createFileStructure/route.ts | 2 +- components/FeatureMoblieView.tsx | 6 +- components/Particles.tsx | 2 +- .../File-Tree-Components/DirDiv.tsx | 4 +- .../File-Tree-Components/FileDiv.tsx | 4 +- .../File-Tree-Components/SubTree.tsx | 2 +- components/atg/Editor/components/sidebar.tsx | 4 +- components/atg/Editor/editor/code.tsx | 18 +- components/atg/Editor/utils/File-Structure.ts | 2 +- components/atg/Editor/utils/api-functions.ts | 4 +- components/atg/Terminal/hooks.tsx | 8 +- components/atg/Terminal/index.tsx | 8 +- components/atg/Terminal/types.ts | 12 +- components/atg/components/AppBar.tsx | 30 +-- .../components/LanguageSelectorComponent.tsx | 6 +- .../SideBarContent/SideBarNormal.tsx | 34 ++- components/atg/editor.tsx | 2 +- components/atg/utils/types.ts | 6 +- components/banner.tsx | 2 +- components/community.tsx | 12 +- components/conf/banner.tsx | 2 +- components/conf/header.tsx | 4 +- components/conf/modal-video.tsx | 2 +- components/conf/newsletter.tsx | 2 +- components/devscribe/banner.tsx | 2 +- components/devscribe/header.tsx | 4 +- components/installation.tsx | 6 +- components/magicui/neonGradient.tsx | 2 +- components/modal-video.tsx | 6 +- components/pillar-page/block.tsx | 6 +- components/pillar-page/community.tsx | 4 +- components/pillar-page/feature.tsx | 4 +- components/ui/header.tsx | 51 +++-- components/ui/mobile-menu.tsx | 8 +- components/utils/accordion.tsx | 2 +- components/utils/countingNumbers.tsx | 4 +- components/utils/dropdown.tsx | 12 +- components/waitlistForm.tsx | 10 +- components/webstories/Stories.tsx | 20 +- components/webstories/StoriesCards.tsx | 8 +- components/webstories/StoryCard.tsx | 4 +- components/webstories/Webstories.tsx | 20 +- components/webstories/components/Bullets.tsx | 39 ++++ components/webstories/components/FAQ.tsx | 15 ++ components/webstories/components/Header.tsx | 4 +- components/webstories/components/Heading.tsx | 4 + .../webstories/components/SearchBar.tsx | 4 +- .../webstories/components/ShareComponent.tsx | 6 +- .../webstories/components/circularLoader.tsx | 4 +- 51 files changed, 449 insertions(+), 191 deletions(-) create mode 100644 app/(default)/pricing/page.tsx create mode 100644 components/webstories/components/Bullets.tsx create mode 100644 components/webstories/components/FAQ.tsx create mode 100644 components/webstories/components/Heading.tsx diff --git a/app/(default)/pricing/page.tsx b/app/(default)/pricing/page.tsx new file mode 100644 index 00000000..740e013e --- /dev/null +++ b/app/(default)/pricing/page.tsx @@ -0,0 +1,209 @@ +import Footer from "@/components/ui/footer"; +import Header from "@/components/ui/header"; +import { + Bullets, + bulletsType, +} from "@/components/webstories/components/Bullets"; +import { FAQ } from "@/components/webstories/components/FAQ"; +import { Heading } from "@/components/webstories/components/Heading"; +import Link from "next/link"; + +export const lists: bulletsType = [ + "A growing library of awesome components", + "Lorem ipsum dolor, sit amet cupiditate. Hic, nostrum consequuntur.", + "A contact library of lorem components", +]; + +const faqData = [ + { + question: "What is this component?", + answer: "It's a FAQ component built with Tailwind CSS.", + }, + { + question: "How does it work?", + answer: "Click on a question to reveal the answer.", + }, + { + question: "Is Tailwind CSS necessary?", + answer: "Not necessary, but it simplifies styling.", + }, + { + question: "Is Tailwind CSS necessary?", + answer: "Not necessary, but it simplifies styling.", + }, + { + question: "Is Tailwind CSS necessary?", + answer: "Not necessary, but it simplifies styling.", + }, +]; +export default function () { + return ( +
+
+ +
+
+ {/* Hero content */} +
+ {/* Section header */} +
+ +
+

+ Open Source Lorem ipsum dolor sit amet consectetur + adipisicing elit. Cumque accusantium id quas ullam reiciendis + quia? +

+
+
+
+
+ {/* Wrapping Link with NeonButton */} + + Full Features List + +
+
+
+
+
+
+
+
+
+

+ Existing +

+

+ + Free + +

+

+ Lorem ipsum dolor, si Lorem ipsum dolor sit amet consectetur + adipisicing elit. +

+
+
    + + + Questions? +
+
+ +
+
+

+ Custom +

+

+ + $5 + +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Similique, nihil. Totam, quas! Lorem ipsum dolor sit amet + consectetur adipisicing elit. +

+
+
    + + + Questions? +
+
+
+
+

+ lorem +

+

+ + $13 + +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Similique, nihil. Totam, quas! +

+
+ +
    + + + Questions? +
+
+
+
+

+ Pages +

+

+ + Lorem, ipsum dolor. + + + $1,222 + +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Similique, nihil. Totam, quas! +

+
+ +
    + + + Questions? +
+
+
+
+ {/* FAQ section */} +
+
+ +
+ {faqData.map((item) => { + return ; + })} +
+
+
+
+
+ ); +} diff --git a/app/api/automatic-test-generator/Mutation.ts b/app/api/automatic-test-generator/Mutation.ts index e5967dc7..4a7d86d9 100644 --- a/app/api/automatic-test-generator/Mutation.ts +++ b/app/api/automatic-test-generator/Mutation.ts @@ -51,11 +51,11 @@ export const submitCodeSnippet = async ({ } }; -export type CommandResponse = { +export interface CommandResponse { success: boolean; data?: any; error?: string; -}; +} export async function postRequest( endpoint: string, diff --git a/app/api/createFileStructure/route.ts b/app/api/createFileStructure/route.ts index 06d9eb0f..426b7dea 100644 --- a/app/api/createFileStructure/route.ts +++ b/app/api/createFileStructure/route.ts @@ -10,7 +10,7 @@ interface ErrorResponse { message: string; } -const pathsMap: { [key: string]: string } = { +const pathsMap: Record = { Golang: 'components/atg/demo-projects/projects/goapp', Javascript: 'components/atg/demo-projects/projects/javaScript', Python: 'components/atg/demo-projects/projects/python', diff --git a/components/FeatureMoblieView.tsx b/components/FeatureMoblieView.tsx index ace8fff9..cd3c70d0 100644 --- a/components/FeatureMoblieView.tsx +++ b/components/FeatureMoblieView.tsx @@ -208,7 +208,7 @@ export default function FeaturesMobileView() { leave="transition ease-in-out duration-300 transform absolute" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 -translate-y-16" - beforeEnter={() => heightFix()} + beforeEnter={() => { heightFix(); }} unmount={false} >
@@ -229,7 +229,7 @@ export default function FeaturesMobileView() { leave="transition ease-in-out duration-300 transform absolute" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 -translate-y-16" - beforeEnter={() => heightFix()} + beforeEnter={() => { heightFix(); }} unmount={false} >
@@ -250,7 +250,7 @@ export default function FeaturesMobileView() { leave="transition ease-in-out duration-300 transform absolute" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 -translate-y-16" - beforeEnter={() => heightFix()} + beforeEnter={() => { heightFix(); }} unmount={false} >
diff --git a/components/Particles.tsx b/components/Particles.tsx index 740f8136..24288561 100644 --- a/components/Particles.tsx +++ b/components/Particles.tsx @@ -127,7 +127,7 @@ const Particles: React.FC = ({ dx: number; dy: number; magnetism: number; - }; + } const resizeCanvas = () => { if (canvasContainerRef.current && canvasRef.current && context.current) { diff --git a/components/atg/Editor/components/File-Tree-Components/DirDiv.tsx b/components/atg/Editor/components/File-Tree-Components/DirDiv.tsx index 0e4494f4..a6bc556a 100644 --- a/components/atg/Editor/components/File-Tree-Components/DirDiv.tsx +++ b/components/atg/Editor/components/File-Tree-Components/DirDiv.tsx @@ -55,9 +55,9 @@ export const DirDiv = ({ style={{ paddingLeft: `${depth * 13}px` }} > {open ? ( - + ) : ( - + )} ))} {file.name} diff --git a/components/atg/Editor/components/File-Tree-Components/SubTree.tsx b/components/atg/Editor/components/File-Tree-Components/SubTree.tsx index 9630afd4..486883a5 100644 --- a/components/atg/Editor/components/File-Tree-Components/SubTree.tsx +++ b/components/atg/Editor/components/File-Tree-Components/SubTree.tsx @@ -33,7 +33,7 @@ export const SubTree: React.FC = (props) => { key={file.id} file={file} selectedFile={props.selectedFile} - onClick={() => props.onSelect(file)} + onClick={() => { props.onSelect(file); }} themeFileDiv={props.themeSub} /> )); diff --git a/components/atg/Editor/components/sidebar.tsx b/components/atg/Editor/components/sidebar.tsx index 06c02da9..1085ba26 100644 --- a/components/atg/Editor/components/sidebar.tsx +++ b/components/atg/Editor/components/sidebar.tsx @@ -37,8 +37,8 @@ export const Sidebar = ({ onClick={ClickExpanded} style={{ minWidth: "250px" }} // Ensure content has a minimum width > - - Website + + Website
{expanded && (
diff --git a/components/atg/Editor/editor/code.tsx b/components/atg/Editor/editor/code.tsx index 5b53455e..d902e9a4 100644 --- a/components/atg/Editor/editor/code.tsx +++ b/components/atg/Editor/editor/code.tsx @@ -14,7 +14,7 @@ export const Code = ({ selectedFileName, }: { selectedFile: File | undefined; - showSideBannerBool: Boolean; + showSideBannerBool: boolean; RemoveSideBanner: () => void; settingCodeTheme: boolean; isFullScreen: boolean; @@ -83,23 +83,23 @@ export const Code = ({ // Add event listener to window resize to handle screen transition window.addEventListener("resize", layoutEditor); - return () => window.removeEventListener("resize", layoutEditor); + return () => { window.removeEventListener("resize", layoutEditor); }; } }, [isFullScreen, monacoInstance]); const validateCode = (code: string) => { const diagnostics: monaco.editor.IMarkerData[] = []; - let stack: { char: string; position: number }[] = []; + const stack: { char: string; position: number }[] = []; const openBrackets = "{[("; const closeBrackets = "}])"; - const matchingBracket: { [key: string]: string } = { + const matchingBracket: Record = { "}": "{", "]": "[", ")": "(", }; const stringDelimiters = ['"', "'", "`"]; - let stringStack: { char: string; position: number }[] = []; + const stringStack: { char: string; position: number }[] = []; for (let i = 0; i < code.length; i++) { const char = code[i]; @@ -181,8 +181,8 @@ export const Code = ({ }; validate(); // Initial validation - const subscription = model.onDidChangeContent(() => validate()); - return () => subscription.dispose(); + const subscription = model.onDidChangeContent(() => { validate(); }); + return () => { subscription.dispose(); }; } } }, [monacoInstance]); @@ -237,8 +237,8 @@ export const Code = ({ /> {!showSideBannerBool && (
setShowText(true)} - onMouseLeave={() => setShowText(false)} + onMouseEnter={() => { setShowText(true); }} + onMouseLeave={() => { setShowText(false); }} className={`p-2 absolute z-10 hover:cursor-pointer border border-gray-500 border-b-0 right-0 top-1/2 bg-secondary-300 flex items-center justify-center shadow-lg transition-all duration-500`} style={{ transform: "translateY(-50%)", diff --git a/components/atg/Editor/utils/File-Structure.ts b/components/atg/Editor/utils/File-Structure.ts index e5fdd35f..a6486c97 100644 --- a/components/atg/Editor/utils/File-Structure.ts +++ b/components/atg/Editor/utils/File-Structure.ts @@ -5,7 +5,7 @@ import { Directory, generateUniqueId, Type, File } from "./file-manager"; export function createFileStructure( rootPath: string, - depth: number = 0, + depth = 0, parentId: string | undefined = undefined ): Directory { // Get the base name of the root path diff --git a/components/atg/Editor/utils/api-functions.ts b/components/atg/Editor/utils/api-functions.ts index b1e4f8b9..6f94923b 100644 --- a/components/atg/Editor/utils/api-functions.ts +++ b/components/atg/Editor/utils/api-functions.ts @@ -457,7 +457,7 @@ export const makeKeployTestDir = async ({ if (testing) { console.log("Starting testing process..."); - let reportDirs = keployDir.dirs.find((dir) => dir.name === "Reports"); + const reportDirs = keployDir.dirs.find((dir) => dir.name === "Reports"); let newReportDir: Directory; if (!reportDirs) { @@ -516,7 +516,7 @@ export const removeKeployTestDir = async (rootDir: Directory): Promise dir.name === "Keploy"); + const keployDir = rootDir.dirs.find((dir) => dir.name === "Keploy"); if (keployDir) { // Remove the Keploy directory diff --git a/components/atg/Terminal/hooks.tsx b/components/atg/Terminal/hooks.tsx index 6bbf59e9..8e2993ef 100644 --- a/components/atg/Terminal/hooks.tsx +++ b/components/atg/Terminal/hooks.tsx @@ -8,7 +8,7 @@ import { export const useTerminal = () => { const [terminalRef, setDomNode] = useState(); const setTerminalRef = useCallback( - (node: HTMLDivElement) => setDomNode(node), + (node: HTMLDivElement) => { setDomNode(node); }, [] ); @@ -19,7 +19,7 @@ export const useTerminal = () => { useEffect(() => { const windowResizeEvent = () => { terminalRef?.scrollTo({ - top: terminalRef?.scrollHeight ?? 99999, + top: terminalRef.scrollHeight ?? 99999, behavior: "smooth", }); }; @@ -35,7 +35,7 @@ export const useTerminal = () => { */ useEffect(() => { terminalRef?.scrollTo({ - top: terminalRef?.scrollHeight ?? 99999, + top: terminalRef.scrollHeight ?? 99999, behavior: "smooth", }); }, [history, terminalRef]); @@ -56,7 +56,7 @@ export const useTerminal = () => { new Promise((resolve) => { setTimeout(() => { pushToHistory(content); - return resolve(content); + resolve(content); }, delay); }), [pushToHistory] diff --git a/components/atg/Terminal/index.tsx b/components/atg/Terminal/index.tsx index e08e627e..5a522818 100644 --- a/components/atg/Terminal/index.tsx +++ b/components/atg/Terminal/index.tsx @@ -75,9 +75,9 @@ export const Terminal = forwardRef( const handleInputKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter") { - const commandToExecute = commands?.[input]; + const commandToExecute = commands[input]; if (commandToExecute) { - commandToExecute?.(); + commandToExecute(); } else { handleCommandNotFound(); } @@ -184,9 +184,7 @@ export const Terminal = forwardRef(
))}
{!Loading ? ( <> diff --git a/components/atg/Terminal/types.ts b/components/atg/Terminal/types.ts index 788b1fcc..4aca09ab 100644 --- a/components/atg/Terminal/types.ts +++ b/components/atg/Terminal/types.ts @@ -2,19 +2,17 @@ import {ReactNode} from "react"; export type TerminalHistoryItem = ReactNode | string; export type TerminalHistory = TerminalHistoryItem[]; -export type TerminalPushToHistoryWithDelayProps = { +export interface TerminalPushToHistoryWithDelayProps { content: TerminalHistoryItem; delay?: number; -}; +} -export type TerminalCommands = { - [command: string]: () => void; -}; +export type TerminalCommands = Record void>; -export type TerminalProps = { +export interface TerminalProps { history: TerminalHistory; promptLabel?: TerminalHistoryItem; commands: TerminalCommands; -}; \ No newline at end of file +} \ No newline at end of file diff --git a/components/atg/components/AppBar.tsx b/components/atg/components/AppBar.tsx index 9e00e6ae..22e34dfa 100644 --- a/components/atg/components/AppBar.tsx +++ b/components/atg/components/AppBar.tsx @@ -80,28 +80,26 @@ const Appbar = ({
handleMouseEnter(file.id)} + onMouseEnter={() => { handleMouseEnter(file.id); }} onMouseLeave={handleMouseLeave} > @@ -110,14 +108,14 @@ const Appbar = ({ className={`text-xs mx-1 italic ${ AppBarTheme ? "text-slate-900" : "text-white" } h-full `} - onClick={() => onSelect(file)} + onClick={() => { onSelect(file); }} > {file.name} {selectedFile?.id != file.id && ( )} - {selectedFile?.id == file?.id && ( - @@ -172,7 +166,7 @@ const FileIcon = ({ extension?: string; IconsTheme: boolean; }) => { - let icon = getIcon(extension || "", name || "", IconsTheme); + const icon = getIcon(extension || "", name || "", IconsTheme); return {icon}; }; diff --git a/components/atg/components/LanguageSelectorComponent.tsx b/components/atg/components/LanguageSelectorComponent.tsx index 3a20d8c0..a5bf1f6c 100644 --- a/components/atg/components/LanguageSelectorComponent.tsx +++ b/components/atg/components/LanguageSelectorComponent.tsx @@ -14,7 +14,7 @@ const languages = [ { name: "Javascript", image: JAVASCRIPT }, ]; -const schemaMap: { [key: string]: string } = { +const schemaMap: Record = { "GOLANG": GolangSchema, "JAVASCRIPT": JavaScriptSchema, "PYTHON": PythonSchema, @@ -146,7 +146,7 @@ export default function LanguageSelector({ ref={buttonRef} type="button" className={`inline-flex justify-between w-full rounded-md shadow-sm px-4 py-2 ${Selectortheme ? "bg-white text-gray-700 border border-gray-200" : "bg-[#1a1e22] border border-gray-700 text-gray-200"} text-sm font-medium transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-200`} - onClick={() => setIsExpanded(!isExpanded)} + onClick={() => { setIsExpanded(!isExpanded); }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > @@ -187,7 +187,7 @@ export default function LanguageSelector({
-
-
- setFormOpen(false)} /> + { setFormOpen(false); }} /> ); } diff --git a/components/pillar-page/community.tsx b/components/pillar-page/community.tsx index ae4ffbe6..6114ef8b 100644 --- a/components/pillar-page/community.tsx +++ b/components/pillar-page/community.tsx @@ -20,8 +20,8 @@ const SocialCloud: React.FC = () => { rel="noopener noreferrer" className={`social-link link-${index + 1}`} title={link.title} - onMouseEnter={() => setValue(link.description)} - onMouseLeave={() => setValue(" Where Code Meets Community!")} + onMouseEnter={() => { setValue(link.description); }} + onMouseLeave={() => { setValue(" Where Code Meets Community!"); }} > {link.icon} diff --git a/components/pillar-page/feature.tsx b/components/pillar-page/feature.tsx index 5022d899..8acf4cd8 100644 --- a/components/pillar-page/feature.tsx +++ b/components/pillar-page/feature.tsx @@ -5,13 +5,13 @@ export default function Features(props: { subtitle: string; highlightTitle: string; title2: string; - featuresData: Array<{ + featuresData: { title: string; description: string; icon: ReactElement; additionalCta?:string; additionalCtaLink?:string; - }>; + }[]; }) { return (
diff --git a/components/ui/header.tsx b/components/ui/header.tsx index e0a0a597..4b01b801 100644 --- a/components/ui/header.tsx +++ b/components/ui/header.tsx @@ -7,7 +7,10 @@ import Logo from "./logo"; import MobileMenu from "./mobile-menu"; import CountingNumbers from "../utils/countingNumbers"; import { isTypeOfExpression } from "typescript"; -import NavItemWithSmallDropdown, {DropdowndataInterface,LinkDatainterface} from "@/components/nav/navItemWithSmallDropdown"; +import NavItemWithSmallDropdown, { + DropdowndataInterface, + LinkDatainterface, +} from "@/components/nav/navItemWithSmallDropdown"; import { PillarPages } from "../utils/resources"; import { StarIcon } from "@heroicons/react/24/solid"; export default function Header() { @@ -21,7 +24,7 @@ export default function Header() { useEffect(() => { scrollHandler(); window.addEventListener("scroll", scrollHandler); - return () => window.removeEventListener("scroll", scrollHandler); + return () => { window.removeEventListener("scroll", scrollHandler); }; }, [top]); useEffect(() => { @@ -33,7 +36,7 @@ export default function Header() { if (response.ok) { const data = await response.json(); // Convert starsCount to 1-digit decimal with 'K' - let stars = data.stargazers_count; + const stars = data.stargazers_count; // let roundedStars = Math.round(data.stargazers_count / 50) * 50; // let formattedStars = (roundedStars / 1000).toFixed(1) + "K"; setStarsCount(stars); @@ -69,8 +72,8 @@ export default function Header() { {/* Desktop navigation */}
-
+
{/* Sliding effect span */} - + - | + + {" "} + |{" "} + - + + {" "} + + + +
+
+ + Sign In + {/**/} + {/* */} + {/**/}
-
- - Sign In - {/**/} - {/* */} - {/**/} - -
diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx index 20012490..eee9ee16 100644 --- a/components/ui/mobile-menu.tsx +++ b/components/ui/mobile-menu.tsx @@ -32,7 +32,7 @@ const MobileMenu: React.FC = ({ starsCount }) => { setMobileNavOpen(false); }; document.addEventListener("click", clickHandler); - return () => document.removeEventListener("click", clickHandler); + return () => { document.removeEventListener("click", clickHandler); }; }); // close the mobile menu if the esc key is pressed @@ -42,7 +42,7 @@ const MobileMenu: React.FC = ({ starsCount }) => { setMobileNavOpen(false); }; document.addEventListener("keydown", keyHandler); - return () => document.removeEventListener("keydown", keyHandler); + return () => { document.removeEventListener("keydown", keyHandler); }; }); return ( @@ -53,7 +53,7 @@ const MobileMenu: React.FC = ({ starsCount }) => { className={`hamburger ${mobileNavOpen && "active"}`} aria-controls="mobile-nav" aria-expanded={mobileNavOpen} - onClick={() => setMobileNavOpen(!mobileNavOpen)} + onClick={() => { setMobileNavOpen(!mobileNavOpen); }} > Menu = ({ starsCount }) => {
setShowResourcesDropdown(!showResourcesDropdown)} + onClick={() => { setShowResourcesDropdown(!showResourcesDropdown); }} className="font-medium text-gray-600 hover:text-primary-300 px-5 py-3 flex items-center transition duration-150 ease-in-out" > Resources diff --git a/components/utils/accordion.tsx b/components/utils/accordion.tsx index 4e574bda..20b72d12 100644 --- a/components/utils/accordion.tsx +++ b/components/utils/accordion.tsx @@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react' -type AccordionpProps = { +interface AccordionpProps { children: React.ReactNode tag?: string title: string diff --git a/components/utils/countingNumbers.tsx b/components/utils/countingNumbers.tsx index 0d753fd3..77993c8d 100644 --- a/components/utils/countingNumbers.tsx +++ b/components/utils/countingNumbers.tsx @@ -35,7 +35,7 @@ export default function CountingNumbers({ useEffect(() => { scrollHandler(); window.addEventListener("scroll", scrollHandler); - return () => window.removeEventListener("scroll", scrollHandler); + return () => { window.removeEventListener("scroll", scrollHandler); }; }, [top]); let value: number; @@ -71,7 +71,7 @@ export default function CountingNumbers({ useEffect(() => { if (isInView) { - let timer = setInterval(() => { + const timer = setInterval(() => { if (reverse) { if (number > starsCount) { setNumber((num) => { diff --git a/components/utils/dropdown.tsx b/components/utils/dropdown.tsx index cabd5578..21d659cf 100644 --- a/components/utils/dropdown.tsx +++ b/components/utils/dropdown.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' import { Transition } from '@headlessui/react' import Link from 'next/link' -type DropdownProps = { +interface DropdownProps { children: React.ReactNode title: string } @@ -19,16 +19,16 @@ export default function Dropdown({ return (
  • setDropdownOpen(true)} - onMouseLeave={() => setDropdownOpen(false)} - onFocus={() => setDropdownOpen(true)} - onBlur={() => setDropdownOpen(false)} + onMouseEnter={() => { setDropdownOpen(true); }} + onMouseLeave={() => { setDropdownOpen(false); }} + onFocus={() => { setDropdownOpen(true); }} + onBlur={() => { setDropdownOpen(false); }} > e.preventDefault()} + onClick={(e) => { e.preventDefault(); }} > {title} diff --git a/components/waitlistForm.tsx b/components/waitlistForm.tsx index d53886ab..fee04512 100644 --- a/components/waitlistForm.tsx +++ b/components/waitlistForm.tsx @@ -14,7 +14,7 @@ interface FormData { dependencies: string; } interface FormProps { - isOpen: Boolean; + isOpen: boolean; onClose: () => void; } export default function CustomForm({ isOpen, onClose }: FormProps) { @@ -63,7 +63,7 @@ export default function CustomForm({ isOpen, onClose }: FormProps) { setEmailError("Please enter a valid email address."); setTimeout(() => { - return setEmailError(""); + setEmailError(""); }, 2000); return; } @@ -84,7 +84,7 @@ export default function CustomForm({ isOpen, onClose }: FormProps) { setLoading(false); setSuccess(true) }) - .catch((err) => console.log(err)); + .catch((err) => { console.log(err); }); }; const isSubmitDisabled = (): boolean => { @@ -109,7 +109,7 @@ export default function CustomForm({ isOpen, onClose }: FormProps) { {!success ? (
    handleSubmit(e)} + onSubmit={(e) => { handleSubmit(e); }} ref={formRef} >

    handleChange(e)} + onChange={(e) => { handleChange(e); }} placeholder="List all the dependencies of your application" disabled={loading} /> diff --git a/components/webstories/Stories.tsx b/components/webstories/Stories.tsx index 2a5943b5..f2b9a6cf 100644 --- a/components/webstories/Stories.tsx +++ b/components/webstories/Stories.tsx @@ -18,27 +18,27 @@ const LottiePlayer = dynamic(() => import("./LottiePlayerWebStories"), { ssr: false, }); -type StoriesProps = { +interface StoriesProps { imageUrl?: string | StaticImageData; Heading?: string; text?: string; swipeText?: string; swipeLink?: string; - image: Boolean; // Use boolean instead of Boolean -}; + image: boolean; // Use boolean instead of Boolean +} -type StoriesComponentProps = { +interface StoriesComponentProps { Story: StoriesProps; totalLen: number; currentIndex: number; - Next: Boolean; - paused: (pause: Boolean) => void; + Next: boolean; + paused: (pause: boolean) => void; animationDuration: string; - timerScreen: Boolean; + timerScreen: boolean; handleNextStory: () => void; handlePrevStory: () => void; slug: string | string[]; -}; +} const Stories = ({ Story, @@ -103,9 +103,9 @@ const Stories = ({ React.useEffect(() => { if (typeof window !== "undefined") { setWindowWidth(window.innerWidth); - const handleResize = () => setWindowWidth(window.innerWidth); + const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); + return () => { window.removeEventListener("resize", handleResize); }; } }, []); diff --git a/components/webstories/StoriesCards.tsx b/components/webstories/StoriesCards.tsx index 10dbe51f..63ad4714 100644 --- a/components/webstories/StoriesCards.tsx +++ b/components/webstories/StoriesCards.tsx @@ -10,16 +10,16 @@ import CloseIcon from "@mui/icons-material/Close"; import AOS from "aos"; import "aos/dist/aos.css"; -type StoriesCardProps = { +interface StoriesCardProps { CardImage: string | StaticImageData; CardDescription: string; Slug: string; Category: string[]; -}; +} -type StoriesCardsProps = { +interface StoriesCardsProps { data: StoriesCardProps[]; -}; +} const StoriesCards = ({ data }: StoriesCardsProps) => { const [searchValue, setSearchValue] = useState(""); diff --git a/components/webstories/StoryCard.tsx b/components/webstories/StoryCard.tsx index 5810819c..64fa2747 100644 --- a/components/webstories/StoryCard.tsx +++ b/components/webstories/StoryCard.tsx @@ -5,12 +5,12 @@ import { StaticImageData } from "next/image"; import { faPlay } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -type StoryCardProps = { +interface StoryCardProps { imagesrc: string | StaticImageData; CardDescription: string; slug: string; categories: string[]; -}; +} const StoryCard = ({ imagesrc, diff --git a/components/webstories/Webstories.tsx b/components/webstories/Webstories.tsx index 0ac69c1c..4d3237e4 100644 --- a/components/webstories/Webstories.tsx +++ b/components/webstories/Webstories.tsx @@ -9,34 +9,34 @@ import Stories from "./Stories"; import Link from "next/link"; import { StaticImageData } from "next/image"; -type WebStoryItem = { +interface WebStoryItem { imageUrl?: string | StaticImageData; Heading?: string; text?: string; swipeText?: string; swipeLink?: string; - image: Boolean; -}; + image: boolean; +} -type WebStoriesProps = { +interface WebStoriesProps { data: WebStoryItem[]; slug: string | string[]; onStoryIndexChange: (index: number) => void; -}; +} const WebStories = ({ data, slug, onStoryIndexChange }: WebStoriesProps) => { const [currentStoryIndex, setCurrentStoryIndex] = useState(0); const [next, setNext] = useState(false); const [totalTime, setTotalTime] = useState(0); const [animatingDuration, setAnimatingDuration] = useState(""); - const [timer, setTimer] = useState(false); + const [timer, setTimer] = useState(false); const intervalRef = useRef(null); const remainingTimeRef = useRef(totalTime); const startTimestampRef = useRef(null); const [windowWidth, setWindowWidth] = useState(0); const mainDivRef = useRef(null); - const Pausing = (pause: Boolean) => { + const Pausing = (pause: boolean) => { if (pause) { stopTimer(); } else { @@ -72,9 +72,9 @@ const WebStories = ({ data, slug, onStoryIndexChange }: WebStoriesProps) => { useEffect(() => { if (typeof window !== "undefined") { setWindowWidth(window.innerWidth); - const handleResize = () => setWindowWidth(window.innerWidth); + const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); + return () => { window.removeEventListener("resize", handleResize); }; } }, []); @@ -87,7 +87,7 @@ const WebStories = ({ data, slug, onStoryIndexChange }: WebStoriesProps) => { useEffect(() => { const currentStory = data[currentStoryIndex]; let time = 5; - if (currentStory?.text) { + if (currentStory.text) { time = TimeAccToContent(currentStory.text); } setTotalTime(time * 1000); diff --git a/components/webstories/components/Bullets.tsx b/components/webstories/components/Bullets.tsx new file mode 100644 index 00000000..20b4b7a5 --- /dev/null +++ b/components/webstories/components/Bullets.tsx @@ -0,0 +1,39 @@ +export interface BulletsProps { + lists: bulletsType; +} +export type bulletsType = string[]; + +export const Bullets = ({ lists }: BulletsProps) => { + return ( + <> + {lists && + lists.map((list: any) => { + return ( +
  • + + {list} +
    +
    • + ); + })} + + ); +}; diff --git a/components/webstories/components/FAQ.tsx b/components/webstories/components/FAQ.tsx new file mode 100644 index 00000000..f43f8748 --- /dev/null +++ b/components/webstories/components/FAQ.tsx @@ -0,0 +1,15 @@ +interface FAQItem { + question: string; + answer: string; +} + +export const FAQ = ({ question, answer }: FAQItem) => { + return ( +
    +
    + {question} +

    {answer}

    +
    +
    + ); +}; diff --git a/components/webstories/components/Header.tsx b/components/webstories/components/Header.tsx index c4b2d850..e813bc27 100644 --- a/components/webstories/components/Header.tsx +++ b/components/webstories/components/Header.tsx @@ -22,7 +22,7 @@ export default function Header() { useEffect(() => { scrollHandler(); window.addEventListener("scroll", scrollHandler); - return () => window.removeEventListener("scroll", scrollHandler); + return () => { window.removeEventListener("scroll", scrollHandler); }; }, [top]); useEffect(() => { @@ -148,6 +148,6 @@ export default function Header() {

    • ); -}; +} diff --git a/components/webstories/components/Heading.tsx b/components/webstories/components/Heading.tsx new file mode 100644 index 00000000..32806027 --- /dev/null +++ b/components/webstories/components/Heading.tsx @@ -0,0 +1,4 @@ +interface headingType { content: string; className: string } +export const Heading = ({ content, className }: headingType) => { + return
    {content}
    ; +}; diff --git a/components/webstories/components/SearchBar.tsx b/components/webstories/components/SearchBar.tsx index bf7a0a19..1d72fd90 100644 --- a/components/webstories/components/SearchBar.tsx +++ b/components/webstories/components/SearchBar.tsx @@ -1,8 +1,8 @@ import React from "react"; -type SearchBarProps = { +interface SearchBarProps { onChange: (event: React.ChangeEvent) => void; -}; +} const SearchBar = ({ onChange }: SearchBarProps) => { return ( diff --git a/components/webstories/components/ShareComponent.tsx b/components/webstories/components/ShareComponent.tsx index 12f35695..25c85f77 100644 --- a/components/webstories/components/ShareComponent.tsx +++ b/components/webstories/components/ShareComponent.tsx @@ -37,7 +37,7 @@ export default function CustomizedDialogs({handlingPauseBehindScenes}:{handlingP }; const handleClick = () => { - navigator.clipboard.writeText(`${window.location.href}`).catch((error) => { + navigator.clipboard.writeText(window.location.href).catch((error) => { alert(`Not able to copy the code due to ${error}`); }); setOpenSnackBar(true); @@ -84,9 +84,9 @@ export default function CustomizedDialogs({handlingPauseBehindScenes}:{handlingP React.useEffect(() => { if (typeof window !== "undefined") { setWindowWidth(window.innerWidth); - const handleResize = () => setWindowWidth(window.innerWidth); + const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); + return () => { window.removeEventListener("resize", handleResize); }; } }, []); diff --git a/components/webstories/components/circularLoader.tsx b/components/webstories/components/circularLoader.tsx index 04485ce6..9e9962f3 100644 --- a/components/webstories/components/circularLoader.tsx +++ b/components/webstories/components/circularLoader.tsx @@ -40,7 +40,7 @@ const CircularLoader = ({ slug }: { slug: string | string[] }) => { } }, intervalDuration); - return () => clearInterval(interval); + return () => { clearInterval(interval); }; }, []); useEffect(() => { @@ -50,7 +50,7 @@ const CircularLoader = ({ slug }: { slug: string | string[] }) => { window.location.href = `/webstories/${nextIndexSlug}`; }, 1000); - return () => clearTimeout(redirectTimeout); + return () => { clearTimeout(redirectTimeout); }; } }, [completed, nextIndexSlug]);