Skip to content

Commit 15b0efc

Browse files
mohitmalibetterbugszeel-ll
mohitmalibetterbugs
and
zeel-ll
authored
Dev tools (#86)
* feat: add class-validator dependency and update page styles - Added `class-validator` package to `package.json`. - Adjusted styles in `page.tsx` for sidebar positioning and button margin. - Refined text styles in `[slug]/page.tsx` for better readability. - Updated descriptions in `constants.tsx` for JSON tools to enhance clarity. * feat: add Image Resizer and Time Calculator components - Introduced Image Resizer component for local image resizing with format selection and aspect ratio options. - Added Time Calculator component for performing arithmetic operations on time values and calculating durations between dates. - Updated constants and routes to include new tools in the development tools list. - Refined styles in development tools for better UI consistency. * Refine Image Resizer tool descriptions and styles - Updated the title of the Image Resizer to "Image Resizer Online" for clarity. - Enhanced the tool's description to better convey its features and usage. - Improved the step-by-step guide for using the Image Resizer, including clearer instructions and additional details on output preferences. - Adjusted text styles in `[slug]/page.tsx` for better readability. * Refactor Time Calculator and Update Page Styles - Simplified comments in `[slug]/page.tsx` for clarity. - Enhanced `TimeCalculator` component with new features: added row management and keyboard navigation for input fields. - Introduced `useRef` for better DOM manipulation and focused input handling. - Improved user experience by allowing dynamic row addition and input focus on Enter key press. --------- Co-authored-by: zeel0m <zeel@linearloop.io>
1 parent 3139eee commit 15b0efc

2 files changed

Lines changed: 164 additions & 159 deletions

File tree

‎app/[slug]/page.tsx‎

Lines changed: 102 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
497497

498498
return (
499499
<div key={index} className="mt-3">
500-
{/* Primary Flex Layout for Step Key, Title, and Description */}
500+
{/* Step header */}
501501
<div className="flex items-start flex-wrap">
502502
<span
503503
className={`text-white/90 font-semibold text-base${guide?.step_key?.includes("Step")
@@ -510,168 +510,26 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
510510
<span className="text-white/90 font-semibold text-base">
511511
{guide?.step_title}
512512
</span>
513-
{guide?.steps_points?.length > 0 && (
514-
<ul className="pl-12 list-disc">
515-
{guide?.steps_points?.map(
516-
(p: any, index: number) => (
517-
<li key={index}>
518-
{p?.steps_points_title && (
519-
<span className="text-white/90 font-semibold text-base">
520-
{p?.steps_points_title}
521-
</span>
522-
)}
523-
{p?.steps_points_description && (
524-
<p className="text-base text-white/70">
525-
{p?.steps_points_description
526-
?.split(/(".*?")/)
527-
.map(
528-
(part: string, i: number) =>
529-
part.startsWith("") &&
530-
part.endsWith("") ? (
531-
<span
532-
key={i}
533-
className="font-normal text-white/70"
534-
>
535-
{part}
536-
</span>
537-
) : (
538-
<React.Fragment key={i}>
539-
{part
540-
.split(
541-
/(\/\/.*?\/\/)/
542-
)
543-
.map(
544-
(
545-
sub: string,
546-
j: number
547-
) =>
548-
sub.startsWith(
549-
"//"
550-
) &&
551-
sub.endsWith(
552-
"//"
553-
) ? (
554-
<span
555-
key={`${i}-${j}`}
556-
className="font-semibold text-white/70"
557-
>
558-
{sub.slice(
559-
2,
560-
-2
561-
)}
562-
</span>
563-
) : (
564-
sub
565-
)
566-
)}
567-
</React.Fragment>
568-
)
569-
)}
570-
</p>
571-
)}
572-
{Array.isArray(p?.steps_subpoint) &&
573-
p?.steps_subpoint?.length > 0 && (
574-
<ul className="pl-12 list-disc">
575-
{p?.steps_subpoint?.map(
576-
(
577-
sub_p: any,
578-
subIndex: number
579-
) => (
580-
<li key={subIndex}>
581-
{sub_p?.title && (
582-
<span className="text-white/90 font-semibold text-base">
583-
{sub_p?.title}
584-
</span>
585-
)}
586-
{sub_p?.description && (
587-
<span className="text-base text-white/70">
588-
{sub_p?.description
589-
?.split(/(".*?")/)
590-
.map(
591-
(
592-
part: string,
593-
i: number
594-
) =>
595-
part.startsWith(
596-
""
597-
) &&
598-
part.endsWith(
599-
""
600-
) ? (
601-
<span
602-
key={i}
603-
className="font-semibold text-white/90"
604-
>
605-
{part}
606-
</span>
607-
) : (
608-
<React.Fragment
609-
key={i}
610-
>
611-
{part
612-
.split(
613-
/(\/\/.*?\/\/)/
614-
)
615-
.map(
616-
(
617-
sub: string,
618-
j: number
619-
) =>
620-
sub.startsWith(
621-
"//"
622-
) &&
623-
sub.endsWith(
624-
"//"
625-
) ? (
626-
<span
627-
key={`${i}-${j}`}
628-
className="font-semibold text-white/90"
629-
>
630-
{sub.slice(
631-
2,
632-
-2
633-
)}
634-
</span>
635-
) : (
636-
sub
637-
)
638-
)}
639-
</React.Fragment>
640-
)
641-
)}
642-
</span>
643-
)}
644-
</li>
645-
)
646-
)}
647-
</ul>
648-
)}
649-
</li>
650-
)
651-
)}
652-
</ul>
653-
)}
654-
<span className="text-base text-white/70">
513+
</div>
514+
515+
{/* Step descriptions (below title) */}
516+
{description && (
517+
<div className="mt-2 text-base text-white/70">
655518
{parts?.map((part: any, i: any) =>
656-
part.startsWith("") &&
657-
part.endsWith("") ? (
658-
<>
659-
<span
660-
key={`description_${i}`}
661-
className="text-white"
662-
>
663-
{part}
664-
</span>
665-
</>
519+
part.startsWith("") && part.endsWith("") ? (
520+
<span key={`description_${i}`} className="text-white">
521+
{part}
522+
</span>
666523
) : (
667-
part
524+
<React.Fragment key={`description_${i}`}>{part}</React.Fragment>
668525
)
669526
)}
670-
</span>
671-
</div>
527+
</div>
528+
)}
529+
672530
{/* Step Description2 on a New Line, Only If Present */}
673531
{description2 && desParts?.length > 0 && (
674-
<div className="mt-2 text-base text-white/70">
532+
<div className="mt-2 pl-12 text-base text-white/70">
675533
{desParts?.map((part: any, i: any) =>
676534
part.startsWith("") &&
677535
part.endsWith("") ? (
@@ -687,6 +545,93 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
687545
)}
688546
</div>
689547
)}
548+
549+
{guide?.steps_points?.length > 0 && (
550+
<ul className="pl-12 list-disc mt-2">
551+
{guide?.steps_points?.map((p: any, index: number) => (
552+
<li key={index}>
553+
{p?.steps_points_title && (
554+
<span className="text-white/90 font-semibold text-base">
555+
{p?.steps_points_title}
556+
</span>
557+
)}
558+
{p?.steps_points_description && (
559+
<p className="text-base text-white/70">
560+
{p?.steps_points_description
561+
?.split(/(".*?")/)
562+
.map((part: string, i: number) =>
563+
part.startsWith("") && part.endsWith("") ? (
564+
<span key={i} className="font-normal text-white/70">
565+
{part}
566+
</span>
567+
) : (
568+
<React.Fragment key={i}>
569+
{part
570+
.split(/(\/\/.*?\/\/)/)
571+
.map((sub: string, j: number) =>
572+
sub.startsWith("//") && sub.endsWith("//") ? (
573+
<span
574+
key={`${i}-${j}`}
575+
className="font-semibold text-white/70"
576+
>
577+
{sub.slice(2, -2)}
578+
</span>
579+
) : (
580+
sub
581+
)
582+
)}
583+
</React.Fragment>
584+
)
585+
)}
586+
</p>
587+
)}
588+
{Array.isArray(p?.steps_subpoint) && p?.steps_subpoint?.length > 0 && (
589+
<ul className="pl-12 list-disc">
590+
{p?.steps_subpoint?.map((sub_p: any, subIndex: number) => (
591+
<li key={subIndex}>
592+
{sub_p?.title && (
593+
<span className="text-white/90 font-semibold text-base">
594+
{sub_p?.title}
595+
</span>
596+
)}
597+
{sub_p?.description && (
598+
<span className="text-base text-white/70">
599+
{sub_p?.description
600+
?.split(/(".*?")/)
601+
.map((part: string, i: number) =>
602+
part.startsWith("") && part.endsWith("") ? (
603+
<span key={i} className="font-semibold text-white/90">
604+
{part}
605+
</span>
606+
) : (
607+
<React.Fragment key={i}>
608+
{part
609+
.split(/(\/\/.*?\/\/)/)
610+
.map((sub: string, j: number) =>
611+
sub.startsWith("//") && sub.endsWith("//") ? (
612+
<span
613+
key={`${i}-${j}`}
614+
className="font-semibold text-white/90"
615+
>
616+
{sub.slice(2, -2)}
617+
</span>
618+
) : (
619+
sub
620+
)
621+
)}
622+
</React.Fragment>
623+
)
624+
)}
625+
</span>
626+
)}
627+
</li>
628+
))}
629+
</ul>
630+
)}
631+
</li>
632+
))}
633+
</ul>
634+
)}
690635
</div>
691636
);
692637
}

0 commit comments

Comments
 (0)