feat: Improve display formatting and adjust font sizes in API respons…

…e components
SivaramPg · Dec 16, 2024 · 7e55b31 · 7e55b31
1 parent bf7e335
commit 7e55b31
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 13 deletions.
diff --git a/src/app/[category]/[slug]/page.tsx b/src/app/[category]/[slug]/page.tsx
@@ -116,7 +116,7 @@ export default async function Page({
 			<ApiEndpointElement text={data.url} />
 			<RequestDisplayElement slug={`/${category}/${slug}`} />
 			<ResponseDisplayElement>
-				{JSON.stringify(data, null, 2)}
+				{JSON.stringify(data, null, 8)}
 			</ResponseDisplayElement>
 		</main>
 	)

diff --git a/src/app/[category]/page.tsx b/src/app/[category]/page.tsx
@@ -82,7 +82,7 @@ export default async function Page({
 			<ApiEndpointElement text={`https://swapi.info/api/${category}`} />
 			<RequestDisplayElement slug={`/${category}`} />
 			<ResponseDisplayElement>
-				{JSON.stringify(data, null, 2)}
+				{JSON.stringify(data, null, 8)}
 			</ResponseDisplayElement>
 			<div className={cn("w-full max-w-screen-lg flex flex-col gap-2")}>
 				<h4 className="text-lg font-bold md:text-xl lg:text-2xl opacity-70">
@@ -118,7 +118,9 @@ export default async function Page({
 									href={value.url}
 									className="inline-flex items-center w-full gap-2 underline underline-offset-4 hover:text-[#FFE81F]"
 								>
-									<h2 className="text-base lg:text-lg">{value.url}</h2>
+									<h2 className="text-sm sm:text-base">
+										{value.url.replace("https://", "")}
+									</h2>
 									<SpriteIcon
 										id={Icons["tab-external"]}
 										width={20}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,6 +11,6 @@ html .shiki {
   @apply !overflow-x-auto;
   background: #d4d4d411 !important;
   @apply !p-2 sm:!p-4 md:!p-6;
-  @apply !text-xs sm:!text-sm;
+  @apply !text-sm sm:!text-base md:!text-lg;
   /* @apply !text-wrap; */
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -28,7 +28,7 @@ export default async function Home() {
 				<div className="container flex flex-col items-center justify-center gap-8 px-4 mx-auto">
 					<RequestDisplayElement slug={"/"} />
 					<ResponseDisplayElement>
-						{JSON.stringify(data, null, 4)}
+						{JSON.stringify(data, null, 8)}
 					</ResponseDisplayElement>
 					<div className={clsx("w-full max-w-screen-lg flex flex-col gap-2")}>
 						<h4 className="text-lg font-bold md:text-xl lg:text-2xl opacity-70">
@@ -72,8 +72,8 @@ export default async function Home() {
 											href={value as string}
 											className="inline-flex items-center w-full gap-2 underline underline-offset-4 hover:text-[#FFE81F]"
 										>
-											<h2 className="text-base lg:text-lg">
-												{value as string}
+											<h2 className="text-sm sm:text-base">
+												{(value as string).replace("https://", "")}
 											</h2>
 											<SpriteIcon
 												id={Icons["tab-external"]}

diff --git a/src/components/ApiEndpointElement.tsx b/src/components/ApiEndpointElement.tsx
@@ -34,7 +34,7 @@ export default function ApiEndpointElement({
 				<input
 					type="text"
 					className="w-full px-4 text-lg font-bold text-black border border-r-0 bg-gray-50"
-					value={text}
+					value={text.replace("https://", "")}
 					readOnly
 				/>
 				<a

diff --git a/src/components/RequestDisplayElement.tsx b/src/components/RequestDisplayElement.tsx
@@ -22,7 +22,10 @@ const RequestDisplayElement = async ({
 				Request:
 			</h4>
 			<div
-				className="rounded-xl border border-[#333] overflow-x-auto text-xs"
+				className="rounded-xl border border-[#333] overflow-x-auto"
+				style={{
+					fontSize: 16,
+				}}
 				/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */
 				dangerouslySetInnerHTML={{ __html: code }}
 			/>
@@ -34,7 +37,7 @@ export default RequestDisplayElement
 
 function getRequest(slug: string) {
 	return `fetch("https://swapi.info/api${slug}")
-  .then((res) => res.json()) // Parse the JSON content from the API to be consumed
-  .then((json) => console.log(json)) // Log the JSON response to your console
-  .catch((error) => console.error(error)) // Log the API error (if any) to your console`
+        .then((res) => res.json()) // Parse the JSON content from the API to be consumed
+        .then((json) => console.log(json)) // Log the JSON response to your console
+        .catch((error) => console.error(error)) // Log the API error (if any) to your console`
 }
diff --git a/src/components/ResponseDisplayElement.tsx b/src/components/ResponseDisplayElement.tsx
@@ -22,7 +22,7 @@ const ResponseDisplayElement = async ({
 				Result:
 			</h4>
 			<div
-				className="rounded-xl border border-[#333] overflow-x-auto"
+				className="rounded-xl border border-[#333] overflow-auto max-h-[100vh]"
 				/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */
 				dangerouslySetInnerHTML={{ __html: code }}
 			/>