diff --git a/components/Icon.tsx b/components/Icon.tsx index 367d00c..72aebfc 100644 --- a/components/Icon.tsx +++ b/components/Icon.tsx @@ -1,13 +1,16 @@ -enum IconSet { - Menu, - Twitter, - GitHub, - YouTube, - Discord, -} +type iconselection = + | "Menu" + | "Users" + | "Link2" + | "ExternalLink" + | "Code" + | "Twitter" + | "GitHub" + | "YouTube" + | "Discord"; type iconprops = { - icon: IconSet; + icon: iconselection; width?: number; height?: number; } & React.SVGProps; @@ -18,7 +21,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => { // - add {width || ogWidth} // - add {height || ogHeight} // - add {...props} - case IconSet.Menu: + case "Menu": return ( { ); - case IconSet.Twitter: + case "Users": + return ( + + + + + + + ); + case "Link2": + return ( + + + + + ); + case "ExternalLink": + return ( + + + + + + ); + case "Code": + return ( + + + + + ); + case "Twitter": // twitter icon courtesy of simpleicons.org return ( { ); - case IconSet.GitHub: + case "GitHub": // github icon courtesy of simpleicons.org return ( { ); - case IconSet.YouTube: + case "YouTube": // youtube icon courtesy of simpleicons.org return ( { ); - case IconSet.Discord: + case "Discord": // discord icon courtesy of simpleicons.org return ( { ); + default: + return <>; } }; -export { Icon, IconSet }; +export { Icon }; +export type { iconselection }; diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx index 6d27b52..0aecdf4 100644 --- a/components/Navigation/Navigation.tsx +++ b/components/Navigation/Navigation.tsx @@ -1,6 +1,6 @@ import styles from "./Navigation.module.scss"; import { GractwoLogo } from "../Logo"; -import { Icon, IconSet } from "../Icon"; +import { Icon } from "../Icon"; import navigation from "../../data/navigation.json"; import Link from "next/link"; @@ -26,7 +26,7 @@ const Navigation = () => { ); })}
- + {/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
{navigation.map((navlink) => { diff --git a/data/administracja.json b/data/administracja.json new file mode 100644 index 0000000..8e5a013 --- /dev/null +++ b/data/administracja.json @@ -0,0 +1,58 @@ +[ + { + "name": "jamesen", + "desc": "project pioneer.", + "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", + "devBadge": true, + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."], + "links": [ + { + "resname": "Website", + "href": "https://manczak.net" + } + ] + } + }, + { + "name": "Mollin", + "desc": "porucznik essy.", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } + }, + { + "name": "Elephant", + "desc": "osobnik demencyjny.", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } + }, + { + "name": "Dzioba", + "desc": "backend bastard.", + "img": "https://avatars.githubusercontent.com/u/62724833?v=4", + "devBadge": true, + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } + }, + { + "name": "KuOlek", + "desc": "duch. (bo go nie ma)", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } + }, + { + "name": "Bavil Gravlax", + "desc": "śpiący rękawek.", + "img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } + } +] diff --git a/data/links.json b/data/links.json index 94707d0..ccb77c2 100644 --- a/data/links.json +++ b/data/links.json @@ -3,30 +3,39 @@ "name": "Discord", "href": "https://discord.gg/NBXq95C", "hrefalias": ["/discord", "/dsc", "/dc"], - "desc": "Nasz serwer na Discordzie!" + "desc": "Nasz serwer na Discordzie!", + "icon": "Discord" }, { "name": "YouTube", "href": "https://www.youtube.com/@gractwopl", "hrefalias": ["/youtube", "/yt"], - "desc": "Nasz kanał na YouTubie!" + "desc": "Nasz kanał na YouTubie!", + "icon": "YouTube" }, { "name": "Twitter", "href": "https://twitter.com/gractwo", "hrefalias": ["/twitter", "/twt"], - "desc": "Nasz profil na Twitterze!" + "desc": "Nasz profil na Twitterze!", + "icon": "Twitter" }, { "name": "GitHub", "href": "https://github.com/gractwo", "hrefalias": ["/github", "/gh"], - "desc": "Nasz org na GitHubie!" + "desc": "Nasz org na GitHubie!", + "icon": "GitHub" + }, + { + "href": "/o-gractwie#sklad-administracji", + "hrefalias": ["/profile"] }, { "name": "Kod Źródłowy", "href": "https://github.com/gractwo/gractwo-web", "hrefalias": ["/source", "/oss"], - "desc": "Kod źródłowy naszej strony internetowej." + "desc": "Kod źródłowy naszej strony internetowej.", + "icon": "Code" } ] diff --git a/pages/index.tsx b/pages/index.tsx index 2fd724e..b7e7af3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import styles from "../styles/Index.module.scss"; import { useEffect, useState } from "react"; import { SEO } from "../components/SEO"; -import { Icon, IconSet } from "../components/Icon"; +import { Icon } from "../components/Icon"; import splashes from "../data/splashes.json"; import Link from "next/link"; import { IndexGallery } from "../components/IndexGallery/IndexGallery"; @@ -21,7 +21,6 @@ const PageIndex = () => { return res.text(); }) .then((data) => { - console.log(data); setMemberCount(data); }) .catch((err) => { @@ -41,8 +40,6 @@ const PageIndex = () => { „{splash || "..."}”

{welcometext}

-
-

Warto naznaczyć, że strona jest w trakcie remontu.

@@ -65,18 +62,18 @@ const PageIndex = () => {
-
- - discord +
+ + discord - - youtube + + youtube - - twitter + + twitter - - github + + github
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 0246e15..8667d78 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -1,10 +1,93 @@ +import { GractwoLogo } from "../components/Logo"; import { SEO } from "../components/SEO"; +import styles from "../styles/oGractwie.module.scss"; +import Link from "next/link"; +import { Icon } from "../components/Icon"; +import { iconselection } from "../components/Icon"; +import administracja from "../data/administracja.json"; +import links from "../data/links.json"; const PageInfo = () => { return ( <> -
Miejsce na stronkę od informacji nt. Gractwa.
+
+
+ +
+

+ + Gractwo +

+

+ Gractwo jest nieformalną organizacją i społecznością osób + zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku + jest zreszeniem ludzi w dużej mierze znających się nawzajem i + spędzających razem „na Gractwie” czas. + {/* Genezą nazwy jest złączenie słów „Gracz” i „Bractwo”. */} + {/* */} + {/* discordowa społeczność kryptogenshinowa która jest yyy często + charakteryzuje się łączeniem przez relacje interpersonalne + kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać + naszą kryptogenshinowość */} + {/* THANKS, MOLLIN */} +

+
+
+
+ + skład administracji + + + + linki i przekierowania + + +
+
+
+

skład administracji

+
+ {administracja.map((el) => { + return ( + +
+ {`zdjęcie +
+

{el.name}

+

{el.desc || "brak opisu."}

+ {el.devBadge ? ( + DEV + ) : ( + "" + )} +
+
+ + ); + })} +
+
+
+

linki i przekierowania

+
+ {links.map((el) => { + if (el.name) { + return ( + + {el.name} + {el.icon ? : ""} + + ); + } + })} +
+
); }; diff --git a/pages/profile/[profname]/index.tsx b/pages/profile/[profname]/index.tsx new file mode 100644 index 0000000..21f684d --- /dev/null +++ b/pages/profile/[profname]/index.tsx @@ -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 ( +
+
+ {`${person.name} +
+

{person.name}

+

{person.desc}

+
+
+ {person.profile?.bigdesc.map((el, index) => { + return

{el ||
}

; + })} +
+ ); + } else { + return ( +
+

Sorki!{" :("}

+

+ Sprawdź pisownię: + + {`/profile/${profname}`} + + nie jest poprawnym lokatorem profilu. +

+
+ ); + } +}; + +export default ProfilePage; diff --git a/styles/Index.module.scss b/styles/Index.module.scss index f856226..c76545b 100644 --- a/styles/Index.module.scss +++ b/styles/Index.module.scss @@ -92,38 +92,3 @@ } } } -.chips { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 1rem; -} -.chip { - display: inline-flex; - text-decoration: none; - gap: 0.5rem; - align-items: center; - color: inherit; - padding: 6px 8px; - border: 1px solid var(--grey); - border-radius: 8px; - transition-duration: 100ms; - text-rendering: geometricPrecision; - // font-family: var(--fonts-bold); - // color: var(--grey); - svg { - color: var(--grey); - } - &:hover, - &:focus { - outline: none; - background: var(--black1); - border: 1px solid var(--black1); - box-shadow: var(--shadow0); - transform: scale(1.1); - svg { - color: var(--color); - } - } -} diff --git a/styles/globals.scss b/styles/globals.scss index e4048d5..bfaa49b 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -39,3 +39,39 @@ main { margin: 0 auto; padding: 1rem; } + +.chips { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; +} +.chip { + display: inline-flex; + text-decoration: none; + gap: 0.5rem; + align-items: center; + color: inherit; + padding: 6px 8px; + border: 1px solid var(--grey); + border-radius: 8px; + transition-duration: 100ms; + text-rendering: geometricPrecision; + // font-family: var(--fonts-bold); + // color: var(--grey); + svg { + color: var(--grey); + } + &:hover, + &:focus { + outline: none; + background: var(--black1); + border: 1px solid var(--black1); + box-shadow: var(--shadow0); + transform: scale(1.1); + svg { + color: var(--color); + } + } +} diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss new file mode 100644 index 0000000..6d9e974 --- /dev/null +++ b/styles/oGractwie.module.scss @@ -0,0 +1,107 @@ +.biglogocontainer { + display: flex; + flex-direction: row; + background: var(--black1); + margin: 1rem 0; + border-radius: 8px; + box-shadow: var(--shadow0); + svg { + min-width: 192px; + min-height: 192px; + @media screen and (max-width: 800px) { + display: none; + } + } + article { + background: rgba(white, 5%); + border-radius: 8px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + @media screen and (max-width: 800px) { + border-radius: 8px; + } + padding: 0.5rem 1rem; + h1 { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + svg { + display: inline; + min-width: initial; + min-height: initial; + @media screen and (min-width: 801px) { + display: none; + } + } + } + p { + margin: 6px 0; + } + } +} +.persons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-top: 1rem; + gap: 1.5rem; + a { + color: inherit; + text-decoration: inherit; + article { + --radius: 6px; + flex: 1; + display: flex; + flex-direction: row; + background: var(--black1); + border-radius: var(--radius); + box-shadow: var(--shadow0); + transition-duration: 100ms; + img { + width: 128px; + max-width: 156px; + flex: 1; + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); + // for alt text + color: var(--grey); + // for mollin's vertical picture to display well + aspect-ratio: 1 / 1; + object-fit: cover; + object-position: 50% 35%; + } + div { + min-width: 14rem; + padding: 0 1rem; + position: relative; + .devBadge { + position: absolute; + bottom: 6px; + right: 8px; + background: rgba(violet, 0.18); + font-family: var(--fonts-bold); + padding: 1px 4px; + border-radius: 2px; + } + } + &:hover { + background: var(--black2); + } + } + @media screen and (max-width: 400px) { + article { + flex-direction: column; + width: 100%; + img { + margin: 1rem auto; + border-radius: 8px; + } + div { + padding-bottom: 1rem; + } + } + } + } +}