basic dynamic route for profile pages implementation
this includes: * modifying the administracja.json schema to fit a longer description for pages, and possibly more soon * the dynamic routing of profiles and handling of data therein * a redirect from base /profile path to a better destination * a journey of self discovery leading me to assess .filter() and .map(el, INDEX!!) as being based as fuck * wet spot where my tears landed
This commit is contained in:
@@ -2,7 +2,24 @@
|
||||
{
|
||||
"name": "jamesen",
|
||||
"desc": "Frontendowiec nie jebany.",
|
||||
"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
|
||||
"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg",
|
||||
"profile": {
|
||||
"bigdesc": [
|
||||
"Tutaj można napisać w kit dużo tekstu o sobie i generalnie to będzie on wyrenderowany na stronce.",
|
||||
"Tak to ma działać, generalnie. Tak. Owszem.",
|
||||
"",
|
||||
"Aaaaaaaaaaaaaaaaaa.",
|
||||
"Jakby ktoś się zastanawiał jak zrobić takiego breaka jak tu:",
|
||||
"",
|
||||
"To zrobiłem żeby się tworzył przy pustym stringu w arrayu opisowym.",
|
||||
"",
|
||||
"ale jestem dobry, ty.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"~jamesen"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Mollin",
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
"hrefalias": ["/github", "/gh"],
|
||||
"desc": "Nasz org na GitHubie!"
|
||||
},
|
||||
{
|
||||
"href": "/o-gractwie#sklad-administracji",
|
||||
"hrefalias": ["/profile"]
|
||||
},
|
||||
{
|
||||
"name": "Kod Źródłowy",
|
||||
"href": "https://github.com/gractwo/gractwo-web",
|
||||
|
||||
72
pages/profile/[profname]/index.tsx
Normal file
72
pages/profile/[profname]/index.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useRouter } from "next/router";
|
||||
import administracja from "../../../data/administracja.json";
|
||||
|
||||
const ProfilePage = () => {
|
||||
const router = useRouter();
|
||||
const profname = router.query.profname as string;
|
||||
if (
|
||||
administracja
|
||||
.map((el) => {
|
||||
return el.name.replaceAll(" ", "-").toLocaleLowerCase();
|
||||
})
|
||||
.includes(profname)
|
||||
) {
|
||||
const person = administracja.filter((wpis) => {
|
||||
return wpis.name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
|
||||
})[0];
|
||||
return (
|
||||
<main>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={person.img}
|
||||
alt={`${person.name} profile image`}
|
||||
style={{
|
||||
width: "128px",
|
||||
aspectRatio: "1/1",
|
||||
objectFit: "cover",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<h1>{person.name}</h1>
|
||||
<p>{person.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
{person.profile?.bigdesc.map((el, index) => {
|
||||
return <p key={index}>{el || <br />}</p>;
|
||||
})}
|
||||
</main>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<main>
|
||||
<h1>Sorki!{" :("}</h1>
|
||||
<p style={{ lineHeight: "30px" }}>
|
||||
Sprawdź pisownię:
|
||||
<span
|
||||
style={{
|
||||
background: "var(--black1)",
|
||||
boxShadow: "var(--shadow0)",
|
||||
padding: "8px",
|
||||
margin: "10px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
{`/profile/${profname}`}
|
||||
</span>
|
||||
nie jest poprawnym lokatorem profilu.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ProfilePage;
|
||||
@@ -1,5 +0,0 @@
|
||||
const ProfileJamesen = () => {
|
||||
return <main>Hello, this is jamesen's profile page!!</main>;
|
||||
};
|
||||
|
||||
export default ProfileJamesen;
|
||||
Reference in New Issue
Block a user