Skip to content

Dev tools #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dev-betterbugs merged 8 commits into from
Apr 22, 2026
Merged

Dev tools #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
860e1f5
feat: add class-validator dependency and update page styles
zeel0m Apr 8, 2026
92c7e52
Merge branch 'develop' into dev-tools
mohitmalibetterbugs Apr 14, 2026
400a33b
Merge branch 'develop' of github.com:betterbugs/dev-tools into dev-tools
zeel0m Apr 20, 2026
35c3e79
feat: add Image Resizer and Time Calculator components
zeel0m Apr 20, 2026
4e8f144
Merge branch 'develop' of github.com:betterbugs/dev-tools into dev-tools
zeel0m Apr 21, 2026
9e25972
Refine Image Resizer tool descriptions and styles
zeel0m Apr 21, 2026
9b0942c
Merge branch 'develop' of github.com:betterbugs/dev-tools into dev-tools
zeel0m Apr 22, 2026
4fde075
Refactor Time Calculator and Update Page Styles
zeel0m Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 102 additions & 157 deletions app/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,7 +497,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {

return (
<div key={index} className="mt-3">
{/* Primary Flex Layout for Step Key, Title, and Description */}
{/* Step header */}
<div className="flex items-start flex-wrap">
<span
className={`text-white/90 font-semibold text-base${guide?.step_key?.includes("Step")
Expand All @@ -510,168 +510,26 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
<span className="text-white/90 font-semibold text-base">
{guide?.step_title}
</span>
{guide?.steps_points?.length > 0 && (
<ul className="pl-12 list-disc">
{guide?.steps_points?.map(
(p: any, index: number) => (
<li key={index}>
{p?.steps_points_title && (
<span className="text-white/90 font-semibold text-base">
{p?.steps_points_title}
</span>
)}
{p?.steps_points_description && (
<p className="text-base text-white/70">
{p?.steps_points_description
?.split(/(".*?")/)
.map(
(part: string, i: number) =>
part.startsWith("") &&
part.endsWith("") ? (
<span
key={i}
className="font-normal text-white/70"
>
{part}
</span>
) : (
<React.Fragment key={i}>
{part
.split(
/(\/\/.*?\/\/)/
)
.map(
(
sub: string,
j: number
) =>
sub.startsWith(
"//"
) &&
sub.endsWith(
"//"
) ? (
<span
key={`${i}-${j}`}
className="font-semibold text-white/70"
>
{sub.slice(
2,
-2
)}
</span>
) : (
sub
)
)}
</React.Fragment>
)
)}
</p>
)}
{Array.isArray(p?.steps_subpoint) &&
p?.steps_subpoint?.length > 0 && (
<ul className="pl-12 list-disc">
{p?.steps_subpoint?.map(
(
sub_p: any,
subIndex: number
) => (
<li key={subIndex}>
{sub_p?.title && (
<span className="text-white/90 font-semibold text-base">
{sub_p?.title}
</span>
)}
{sub_p?.description && (
<span className="text-base text-white/70">
{sub_p?.description
?.split(/(".*?")/)
.map(
(
part: string,
i: number
) =>
part.startsWith(
""
) &&
part.endsWith(
""
) ? (
<span
key={i}
className="font-semibold text-white/90"
>
{part}
</span>
) : (
<React.Fragment
key={i}
>
{part
.split(
/(\/\/.*?\/\/)/
)
.map(
(
sub: string,
j: number
) =>
sub.startsWith(
"//"
) &&
sub.endsWith(
"//"
) ? (
<span
key={`${i}-${j}`}
className="font-semibold text-white/90"
>
{sub.slice(
2,
-2
)}
</span>
) : (
sub
)
)}
</React.Fragment>
)
)}
</span>
)}
</li>
)
)}
</ul>
)}
</li>
)
)}
</ul>
)}
<span className="text-base text-white/70">
</div>

{/* Step descriptions (below title) */}
{description && (
<div className="mt-2 text-base text-white/70">
{parts?.map((part: any, i: any) =>
part.startsWith("") &&
part.endsWith("") ? (
<>
<span
key={`description_${i}`}
className="text-white"
>
{part}
</span>
</>
part.startsWith("") && part.endsWith("") ? (
<span key={`description_${i}`} className="text-white">
{part}
</span>
) : (
part
<React.Fragment key={`description_${i}`}>{part}</React.Fragment>
)
)}
</span>
</div>
</div>
)}

{/* Step Description2 on a New Line, Only If Present */}
{description2 && desParts?.length > 0 && (
<div className="mt-2 text-base text-white/70">
<div className="mt-2 pl-12 text-base text-white/70">
{desParts?.map((part: any, i: any) =>
part.startsWith("") &&
part.endsWith("") ? (
Expand All @@ -687,6 +545,93 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
)}
</div>
)}

{guide?.steps_points?.length > 0 && (
<ul className="pl-12 list-disc mt-2">
{guide?.steps_points?.map((p: any, index: number) => (
<li key={index}>
{p?.steps_points_title && (
<span className="text-white/90 font-semibold text-base">
{p?.steps_points_title}
</span>
)}
{p?.steps_points_description && (
<p className="text-base text-white/70">
{p?.steps_points_description
?.split(/(".*?")/)
.map((part: string, i: number) =>
part.startsWith("") && part.endsWith("") ? (
<span key={i} className="font-normal text-white/70">
{part}
</span>
) : (
<React.Fragment key={i}>
{part
.split(/(\/\/.*?\/\/)/)
.map((sub: string, j: number) =>
sub.startsWith("//") && sub.endsWith("//") ? (
<span
key={`${i}-${j}`}
className="font-semibold text-white/70"
>
{sub.slice(2, -2)}
</span>
) : (
sub
)
)}
</React.Fragment>
)
)}
</p>
)}
{Array.isArray(p?.steps_subpoint) && p?.steps_subpoint?.length > 0 && (
<ul className="pl-12 list-disc">
{p?.steps_subpoint?.map((sub_p: any, subIndex: number) => (
<li key={subIndex}>
{sub_p?.title && (
<span className="text-white/90 font-semibold text-base">
{sub_p?.title}
</span>
)}
{sub_p?.description && (
<span className="text-base text-white/70">
{sub_p?.description
?.split(/(".*?")/)
.map((part: string, i: number) =>
part.startsWith("") && part.endsWith("") ? (
<span key={i} className="font-semibold text-white/90">
{part}
</span>
) : (
<React.Fragment key={i}>
{part
.split(/(\/\/.*?\/\/)/)
.map((sub: string, j: number) =>
sub.startsWith("//") && sub.endsWith("//") ? (
<span
key={`${i}-${j}`}
className="font-semibold text-white/90"
>
{sub.slice(2, -2)}
</span>
) : (
sub
)
)}
</React.Fragment>
)
)}
</span>
)}
</li>
))}
</ul>
)}
</li>
))}
</ul>
)}
</div>
);
}
Expand Down
Loading
Loading