Skip to content

Commit cb100b1

Browse files
arnobt78arnobt78
committed
update: api docs, api status client, my profile tabs ui components
1 parent fc4a9ff commit cb100b1

5 files changed

Lines changed: 113 additions & 94 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
A modern, full-stack university library management solution built with Next.js 15, TypeScript, and Drizzle ORM. BookWise provides comprehensive book borrowing, user management, and administrative features for educational institutions.
44

5-
![Screenshot 2025-09-16 at 15 00 16](https://github.com/user-attachments/assets/20e637e9-9e76-44b7-9923-317372a02a98)
65
![Screenshot 2025-09-16 at 15 00 38](https://github.com/user-attachments/assets/e495275c-a7b2-45aa-bd37-cd37ca1dadf8)
76
![Screenshot 2025-09-16 at 15 00 50](https://github.com/user-attachments/assets/e39465de-e514-44c6-b385-29ab210717e9)
87
![Screenshot 2025-09-16 at 15 01 00](https://github.com/user-attachments/assets/a610b78a-bf72-4371-8f95-abc5c3bf7179)

‎app/api-docs/page.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -399,30 +399,30 @@ const ApiDocsPage = async () => {
399399
</div>
400400

401401
{/* Base URL */}
402-
<Card className="mb-8">
402+
<Card className="mb-8 border-gray-700 bg-gray-800">
403403
<CardHeader>
404-
<CardTitle className="flex items-center gap-2">
404+
<CardTitle className="flex items-center gap-2 text-light-100">
405405
<Code className="size-5" />
406406
Base URL
407407
</CardTitle>
408408
</CardHeader>
409409
<CardContent>
410410
<div className="flex items-center gap-2">
411-
<code className="flex-1 rounded bg-gray-100 px-3 py-2 font-mono text-sm">
411+
<code className="flex-1 rounded bg-gray-700 px-3 py-2 font-mono text-sm text-light-100">
412412
{baseUrl}
413413
</code>
414414
<CopyButton text={baseUrl} />
415415
</div>
416-
<p className="mt-2 text-sm text-gray-600">
416+
<p className="mt-2 text-sm text-light-200">
417417
All API endpoints are relative to this base URL
418418
</p>
419419
</CardContent>
420420
</Card>
421421

422422
{/* API Endpoints with Tabs */}
423-
<Card className="mb-8">
423+
<Card className="mb-8 border-gray-700 bg-gray-800">
424424
<CardHeader>
425-
<CardTitle className="flex items-center gap-2">
425+
<CardTitle className="flex items-center gap-2 text-light-100">
426426
<Code className="size-5" />
427427
API Endpoints
428428
</CardTitle>
@@ -434,14 +434,14 @@ const ApiDocsPage = async () => {
434434
.replace(/\s+/g, "-")}
435435
className="w-full"
436436
>
437-
<TabsList className="grid w-full grid-cols-3 lg:grid-cols-6">
437+
<TabsList className="grid w-full grid-cols-3 bg-gray-700 border-gray-600 lg:grid-cols-6">
438438
{apiEndpoints.map((category) => (
439439
<TabsTrigger
440440
key={category.category}
441441
value={category.category
442442
.toLowerCase()
443443
.replace(/\s+/g, "-")}
444-
className="flex items-center gap-2 text-xs"
444+
className="flex items-center gap-2 text-xs text-light-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md"
445445
>
446446
{category.icon}
447447
<span className="hidden sm:inline">
@@ -462,10 +462,10 @@ const ApiDocsPage = async () => {
462462
<div className="space-y-4">
463463
<div className="mb-4 flex items-center gap-2">
464464
{category.icon}
465-
<h3 className="text-xl font-semibold">
465+
<h3 className="text-xl font-semibold text-light-100">
466466
{category.category}
467467
</h3>
468-
<Badge variant="outline" className="ml-auto">
468+
<Badge variant="outline" className="ml-auto border-gray-600 bg-gray-700 text-light-200">
469469
{category.endpoints.length} endpoints
470470
</Badge>
471471
</div>
@@ -491,9 +491,9 @@ const ApiDocsPage = async () => {
491491
</Card>
492492

493493
{/* Status Codes */}
494-
<Card className="mb-8">
494+
<Card className="mb-8 border-gray-700 bg-gray-800">
495495
<CardHeader>
496-
<CardTitle>HTTP Status Codes</CardTitle>
496+
<CardTitle className="text-light-100">HTTP Status Codes</CardTitle>
497497
</CardHeader>
498498
<CardContent>
499499
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -502,49 +502,49 @@ const ApiDocsPage = async () => {
502502
<Badge className="bg-green-100 text-green-800">
503503
200
504504
</Badge>
505-
<span className="text-sm">Success</span>
505+
<span className="text-sm text-light-200">Success</span>
506506
</div>
507507
<div className="flex items-center gap-2">
508508
<Badge className="bg-blue-100 text-blue-800">201</Badge>
509-
<span className="text-sm">Created</span>
509+
<span className="text-sm text-light-200">Created</span>
510510
</div>
511511
<div className="flex items-center gap-2">
512512
<Badge className="bg-yellow-100 text-yellow-800">
513513
400
514514
</Badge>
515-
<span className="text-sm">Bad Request</span>
515+
<span className="text-sm text-light-200">Bad Request</span>
516516
</div>
517517
</div>
518518
<div className="space-y-2">
519519
<div className="flex items-center gap-2">
520520
<Badge className="bg-red-100 text-red-800">401</Badge>
521-
<span className="text-sm">Unauthorized</span>
521+
<span className="text-sm text-light-200">Unauthorized</span>
522522
</div>
523523
<div className="flex items-center gap-2">
524524
<Badge className="bg-red-100 text-red-800">403</Badge>
525-
<span className="text-sm">Forbidden</span>
525+
<span className="text-sm text-light-200">Forbidden</span>
526526
</div>
527527
<div className="flex items-center gap-2">
528528
<Badge className="bg-red-100 text-red-800">500</Badge>
529-
<span className="text-sm">Internal Server Error</span>
529+
<span className="text-sm text-light-200">Internal Server Error</span>
530530
</div>
531531
</div>
532532
</div>
533533
</CardContent>
534534
</Card>
535535

536536
{/* Authentication */}
537-
<Card className="mb-8">
537+
<Card className="mb-8 border-gray-700 bg-gray-800">
538538
<CardHeader>
539-
<CardTitle>Authentication</CardTitle>
539+
<CardTitle className="text-light-100">Authentication</CardTitle>
540540
</CardHeader>
541541
<CardContent>
542-
<p className="mb-4 text-sm text-gray-700">
542+
<p className="mb-4 text-sm text-light-200">
543543
This API uses NextAuth.js for authentication. Include the
544544
session cookie in your requests for authenticated endpoints.
545545
</p>
546-
<div className="rounded bg-gray-50 p-3">
547-
<pre className="text-sm">
546+
<div className="rounded bg-gray-700 p-3">
547+
<pre className="text-sm text-light-200">
548548
{`// Example: Making an authenticated request
549549
fetch('${baseUrl}/api/reviews/book-id', {
550550
method: 'POST',
@@ -564,11 +564,11 @@ fetch('${baseUrl}/api/reviews/book-id', {
564564

565565
{/* Footer */}
566566
<div className="mt-12 text-center">
567-
<p className="text-sm text-gray-500">
567+
<p className="text-sm text-light-200">
568568
BookWise University Library Management System API
569569
Documentation
570570
</p>
571-
<p className="text-xs text-gray-400">
571+
<p className="text-xs text-light-300">
572572
Generated automatically • Last updated:{" "}
573573
{new Date().toLocaleDateString()}
574574
</p>

‎components/ApiEndpointCard.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ const ApiEndpointCard = ({
3838
};
3939

4040
return (
41-
<div className="rounded-lg border border-gray-200 bg-white p-4">
41+
<div className="rounded-lg border border-gray-600 bg-gray-700 p-4">
4242
<div className="mb-3 flex items-center gap-3">
4343
<Badge className={`${getMethodColor(method)} border`}>{method}</Badge>
44-
<code className="flex-1 font-mono text-sm">{path}</code>
44+
<code className="flex-1 font-mono text-sm text-light-100">{path}</code>
4545
<CopyButton text={`${baseUrl}${path}`} />
4646
</div>
4747

48-
<p className="mb-3 text-sm text-gray-700">{description}</p>
48+
<p className="mb-3 text-sm text-light-200">{description}</p>
4949

5050
<div className="mb-3 flex gap-2">
5151
{auth && (
@@ -69,9 +69,9 @@ const ApiEndpointCard = ({
6969
{/* Request Body */}
7070
{requestBody && (
7171
<div className="mb-3">
72-
<h4 className="mb-2 font-semibold text-gray-900">Request Body:</h4>
73-
<div className="rounded bg-gray-50 p-3">
74-
<pre className="text-sm">
72+
<h4 className="mb-2 font-semibold text-light-100">Request Body:</h4>
73+
<div className="rounded bg-gray-600 p-3">
74+
<pre className="text-sm text-light-200">
7575
{JSON.stringify(requestBody, null, 2)}
7676
</pre>
7777
</div>
@@ -81,9 +81,9 @@ const ApiEndpointCard = ({
8181
{/* Response */}
8282
{response && (
8383
<div>
84-
<h4 className="mb-2 font-semibold text-gray-900">Response:</h4>
85-
<div className="rounded bg-gray-50 p-3">
86-
<pre className="text-sm">
84+
<h4 className="mb-2 font-semibold text-light-100">Response:</h4>
85+
<div className="rounded bg-gray-600 p-3">
86+
<pre className="text-sm text-light-200">
8787
{typeof response === "string"
8888
? response
8989
: JSON.stringify(response, null, 2)}

0 commit comments

Comments
 (0)