Skip to content

Commit 38a5abb

Browse files
FedeCodeLabFedeCodeLab
committed
Datos agregados correctamente
1 parent 06121f4 commit 38a5abb

2 files changed

Lines changed: 56 additions & 29 deletions

File tree

‎components/user/Repositories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ interface RepositoriesProps {
1515

1616
export const Repositories = ({ repos }: RepositoriesProps) => {
1717
return (
18-
<div className="col-span-full mt-6 flex flex-col gap-4">
18+
<div className="col-span-full mt-6 mb-10 flex flex-col gap-4">
1919
<h4 className="text-light text-lg font-semibold mb-2">Repositories:</h4>
2020
{repos.length > 0 ? (
21-
<ul className="grid gap-3 md:grid-cols-2">
21+
<ul className="grid gap-3 grid-cols-1 md:grid-cols-2">
2222
{repos.map((repo) => (
2323
<Link href={repo.html_url} key={repo.id} target="_blank">
2424
<li className="border border-blue-highlight-light hover:bg-blue-highlight rounded-lg p-6 flex flex-col gap-4">

‎components/user/index.tsx‎

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Image from "next/image";
22
import { Repositories } from "./Repositories";
3+
import Link from "next/link";
34

45
export interface GithubRepo {
56
id: number;
@@ -28,33 +29,59 @@ export interface GithubUser {
2829
export const User = (selectedUser: GithubUser) => {
2930
return (
3031
<div className="col-span-full">
31-
<div className="border border-blue-highlight-light rounded-lg p-4 text-center bg-blue-highlight">
32-
<Image
33-
src={selectedUser.avatar_url || "/avatar-default.jpg"}
34-
alt={selectedUser.login}
35-
width={300}
36-
height={300}
37-
className="w-[300px] h-[300px] rounded-full mx-auto mb-3"
38-
unoptimized
39-
/>
40-
41-
<h3 className="font-semibold text-light text-2xl">
42-
{selectedUser.login}
43-
</h3>
44-
45-
{selectedUser.name && (
46-
<p className="text-default">{selectedUser.name}</p>
47-
)}
48-
{selectedUser.bio && <p className="text-default">{selectedUser.bio}</p>}
49-
50-
<p className="text-default mt-2">
51-
Followers: {selectedUser.followers} | Following:{" "}
52-
{selectedUser.following}
53-
</p>
54-
55-
{selectedUser.location && <p>{selectedUser.location}</p>}
56-
{selectedUser.blog && <p>{selectedUser.blog}</p>}
57-
{selectedUser.company && <p>{selectedUser.company}</p>}
32+
<div className=" border border-blue-highlight-light rounded-lg p-4 bg-blue-highlight flex flex-col gap-10">
33+
<div className="text-center flex flex-col gap-4 items-center">
34+
<Image
35+
src={selectedUser.avatar_url || "/avatar-default.jpg"}
36+
alt={selectedUser.login}
37+
width={300}
38+
height={300}
39+
className="w-[300px] h-[300px] rounded-full mx-auto mb-3"
40+
unoptimized
41+
/>
42+
43+
<div>
44+
<h1 className="font-semibold text-light text-3xl">
45+
{selectedUser.login}
46+
</h1>
47+
48+
{selectedUser.name && (
49+
<h2 className="text-default text-xl">{selectedUser.name}</h2>
50+
)}
51+
</div>
52+
53+
{selectedUser.bio && (
54+
<p className="text-default max-w-[400px] ">{selectedUser.bio}</p>
55+
)}
56+
<div className="flex gap-4">
57+
<div className="flex items-center justify-center text-default text-[14px] font-semibold rounded-[10px] border border-blue-highlight-light py-2 px-6 w-[200px] text-center">
58+
<p>Followers: {selectedUser.followers}</p>
59+
</div>
60+
61+
<div className="flex items-center justify-center text-default text-[14px] font-semibold rounded-[10px] border border-blue-highlight-light py-2 px-4 w-[200px] text-center">
62+
<p>Following: {selectedUser.following}</p>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<div className="flex flex-col gap-6">
68+
<div className="flex flex-col gap-2">
69+
{selectedUser.location && (
70+
<p>📌 Location: {selectedUser.location}</p>
71+
)}
72+
{selectedUser.blog && (
73+
<Link href={selectedUser.blog} target="_blank">
74+
🔗 Page:{" "}
75+
<span className="text-blue-400 hover:text-blue-600">
76+
{selectedUser.blog}
77+
</span>
78+
</Link>
79+
)}
80+
{selectedUser.company && (
81+
<p>💼 Enterprise: {selectedUser.company}</p>
82+
)}
83+
</div>
84+
</div>
5885
</div>
5986
<Repositories repos={selectedUser.repos || []} />
6087
</div>

0 commit comments

Comments
 (0)