Skip to content

Commit 62f0436

Browse files
SoeckaSoecka
committed
[polish] member, git card layout
[polish] service, project section
1 parent c8f0ee7 commit 62f0436

File tree

20 files changed

+442
-343
lines changed

20 files changed

+442
-343
lines changed

‎components/Git/Card.tsx‎

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Button, Chip } from '@mui/material';
1+
import { Button, Chip, Divider, IconButton } from '@mui/material';
22
import { GitRepository } from 'mobx-github';
33
import { observer } from 'mobx-react';
44
import Link from 'next/link';
55
import { FC, useContext } from 'react';
66

77
import { I18nContext } from '../../models/Translation';
8+
import { SymbolIcon } from '../Icon';
9+
import { GitpodIcon, OcticonIcon } from '../Layout/Svg';
810

911
export interface GitCardProps
1012
extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
@@ -18,37 +20,67 @@ export const GitCard: FC<GitCardProps> = observer(
1820

1921
return (
2022
<li
21-
className={`${className} elevation-1 hover:elevation-8 grid grid-cols-1 grid-rows-10 gap-2 rounded-2xl border p-4 dark:border-0`}
23+
className={`${className} elevation-1 hover:elevation-4 grid grid-cols-1 grid-rows-6 gap-2 rounded-2xl border border-gray-200 p-4 dark:border-0`}
2224
>
23-
<h2 className="row-span-2 text-lg">
25+
<h3 className="row-span-1 text-lg">
2426
<a target="_blank" href={html_url} rel="noreferrer">
2527
{full_name}
2628
</a>
27-
</h2>
29+
</h3>
2830

29-
<nav className="row-span-3 flex flex-row flex-wrap gap-2">
31+
<nav className="scrollbar-none row-span-1 flex snap-x snap-mandatory flex-row flex-nowrap gap-2 overflow-x-scroll">
3032
{topics.map(topic => (
3133
<Chip
3234
key={topic}
3335
size="small"
34-
component="a"
36+
color="info"
37+
variant="outlined"
38+
component={Link}
3539
target="_blank"
3640
href={`https://github.com/topics/${topic}`}
3741
label={topic}
42+
clickable
3843
/>
3944
))}
4045
</nav>
4146

42-
<p className="row-span-3 text-sm">{description}</p>
47+
<p className="row-span-3 text-sm text-neutral-500">{description}</p>
48+
<div className="row-span-1 flex items-center justify-between">
49+
<div className="flex items-center gap-2">
50+
<IconButton
51+
component="a"
52+
target="_blank"
53+
href={`https://codespaces.new/${full_name}`}
54+
rel="noreferrer"
55+
>
56+
<OcticonIcon />
57+
</IconButton>
58+
<IconButton
59+
component="a"
60+
target="_blank"
61+
href={`https://gitpod.io/?autostart=true#${html_url}`}
62+
rel="noreferrer"
63+
>
64+
<GitpodIcon className="h-6 w-6 font-extralight" />
65+
</IconButton>
66+
<IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
67+
<SymbolIcon name="code" />
68+
</IconButton>
69+
</div>
4370

44-
<Button
45-
className="row-span-2 place-self-center"
46-
component={Link}
47-
target="_blank"
48-
href={homepage ?? html_url}
49-
>
50-
{t('home_page')}
51-
</Button>
71+
<Button
72+
component="a"
73+
className="!rounded-full"
74+
variant="contained"
75+
color="info"
76+
target="_blank"
77+
href={homepage ?? html_url}
78+
disabled={!(homepage ?? html_url)}
79+
startIcon={<SymbolIcon name="visibility" />}
80+
>
81+
{t('preview')}
82+
</Button>
83+
</div>
5284
</li>
5385
);
5486
},

‎components/Git/Issue/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const IssueCard: FC<IssueCardProps> = ({
2222
}) => (
2323
<Card {...props}>
2424
<CardContent className="flex h-full flex-col justify-between gap-2">
25-
<h2 className="text-2xl">
25+
<h2 className="text-2xl font-semibold">
2626
<a
2727
href={html_url}
2828
target="_blank"

‎components/Layout/MainNavigator.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
import { AppBar, Drawer, IconButton, Menu, MenuItem, PopoverProps, Toolbar } from '@mui/material';
1+
import {
2+
AppBar,
3+
Button,
4+
Drawer,
5+
IconButton,
6+
Menu,
7+
MenuItem,
8+
PopoverProps,
9+
Toolbar,
10+
} from '@mui/material';
211
import { computed, observable } from 'mobx';
312
import { observer } from 'mobx-react';
413
import { ObservedComponent } from 'mobx-react-helper';
@@ -36,9 +45,9 @@ export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
3645

3746
renderLinks = () =>
3847
this.links.map(({ title, href, target }) => (
39-
<Link key={title} className="py-1" href={href} target={target}>
48+
<Button key={title} component={Link} className="py-1" href={href} target={target}>
4049
{title}
41-
</Link>
50+
</Button>
4251
));
4352

4453
renderI18nSwitch = () => {
@@ -106,7 +115,7 @@ export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
106115

107116
render() {
108117
return (
109-
<AppBar color="transparent" className="fixed z-[1201] backdrop-blur-sm">
118+
<AppBar color="transparent" className="fixed z-[1201] backdrop-blur-md">
110119
<Toolbar>
111120
<div className="container mx-auto flex max-w-screen-xl items-center justify-between px-3">
112121
<div className="flex flex-row items-center gap-3">
@@ -121,14 +130,16 @@ export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
121130
<nav className="item-center hidden flex-row gap-4 md:flex">{this.renderLinks()}</nav>
122131

123132
<div className="flex flex-row items-center gap-3 sm:gap-6">
124-
<Link
133+
<IconButton
134+
className="!text-black dark:!text-white"
135+
component={Link}
125136
href="https://github.com/idea2app"
126137
target="_blank"
127138
rel="noopener noreferrer"
128139
aria-label="idea2app's GitHub account"
129140
>
130141
<GithubIcon />
131-
</Link>
142+
</IconButton>
132143
<ColorModeIconDropdown />
133144
{this.renderI18nSwitch()}
134145
</div>

‎components/Layout/ScrollListPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const ScrollListPage = <D extends DataObject, F extends Filter<D> = Filte
3333
return (
3434
<div className={`container mx-auto max-w-screen-xl px-4 pt-16 pb-6 ${className}`}>
3535
<PageHead title={title} />
36-
<h1 className="my-8 text-4xl">{header}</h1>
36+
<h1 className="my-8 text-4xl font-semibold">{header}</h1>
3737

3838
{scrollList ? (
3939
<ScrollList

‎components/Layout/Section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Section: FC<SectionProps> = observer(
1515

1616
return (
1717
<section className={`mx-auto flex max-w-screen-xl flex-col gap-6 py-8 ${className}`}>
18-
<h2 className="text-center" id={id}>
18+
<h2 className="text-center font-semibold" id={id}>
1919
{title}
2020
</h2>
2121

‎components/Layout/Svg.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,23 @@ export const GithubIcon: FC<SvgIconProps> = props => (
77
</SvgIcon>
88
);
99

10+
export const OcticonIcon: FC<SvgIconProps> = props => (
11+
<SvgIcon {...props}>
12+
<path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z" />
13+
</SvgIcon>
14+
);
15+
16+
export const GitpodIcon: FC<SvgIconProps> = props => (
17+
<SvgIcon {...props}>
18+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 189 208">
19+
<path
20+
d="M112.287 10.358c5.613 9.855 2.2 22.409-7.623 28.04L43.586 73.41a5.2 5.2 0 0 0-2.614 4.51V132.9c0 1.864.997 3.584 2.614 4.511l48.326 27.703a5.202 5.202 0 0 0 5.176 0l48.326-27.703a5.199 5.199 0 0 0 2.614-4.511v-34.19l-43.461 24.6c-9.854 5.577-22.35 2.085-27.909-7.8-5.56-9.885-2.079-22.42 7.775-27.997l62.187-35.2C165.563 41.592 189 55.322 189 77.14v59.926c0 14.036-7.497 26.996-19.645 33.96l-55.511 31.821a38.883 38.883 0 0 1-38.688 0l-55.51-31.821C7.496 164.062 0 151.102 0 137.066V73.754c0-14.036 7.497-26.996 19.645-33.96L84.336 2.712c9.823-5.63 22.337-2.207 27.951 7.647Z"
21+
clip-rule="evenodd"
22+
/>
23+
</svg>
24+
</SvgIcon>
25+
);
26+
1027
export const BrandLogo: FC<SvgIconProps> = props => (
1128
<SvgIcon {...props}>
1229
<svg

‎components/Member/Card.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CardProps, Chip } from '@mui/material';
1+
import { Button, CardProps, Chip, IconButton } from '@mui/material';
22
import { marked } from 'marked';
33
import { observer } from 'mobx-react';
44
import Link from 'next/link';
@@ -12,42 +12,56 @@ export type MemberCardProps = Member & Omit<CardProps, 'id'>;
1212
export const MemberCard: FC<MemberCardProps> = observer(
1313
({ className = '', nickname, skill, position, summary, github }) => (
1414
<li
15-
className={`elevation-1 hover:elevation-8 relative rounded-2xl border p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
15+
className={`elevation-1 hover:elevation-4 relative rounded-2xl border border-gray-200 p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
1616
>
1717
{github && (
18-
<a
19-
className="absolute top-4 right-4"
18+
<IconButton
19+
component={Link}
20+
className="!absolute top-4 right-4"
2021
href={`https://github.com/${String(github)}`}
2122
target="_blank"
2223
rel="noreferrer"
2324
aria-label={`${String(nickname)}'s GitHub account`}
2425
>
2526
<GithubIcon />
26-
</a>
27+
</IconButton>
2728
)}
2829

2930
<div className="flex w-auto items-center gap-4">
3031
{github && (
31-
<img
32-
style={{ width: '4rem', height: '4rem' }}
33-
className="rounded-full object-cover"
34-
src={`https://github.com/${String(github)}.png`}
35-
alt={String(github)}
36-
/>
32+
<Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
33+
<img
34+
style={{ width: '4rem', height: '4rem' }}
35+
className="rounded-full object-cover"
36+
src={`https://github.com/${String(github)}.png`}
37+
alt={String(github)}
38+
/>
39+
</Link>
3740
)}
38-
<Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
39-
<h2 className="text-base">{String(nickname)}</h2>
40-
<p className="text-sm">{String(position ?? '')}</p>
41-
</Link>
41+
<hgroup>
42+
<h4 className="text-base font-bold">{String(nickname)}</h4>
43+
<p className="text-sm text-neutral-400">{String(position ?? '')}</p>
44+
</hgroup>
4245
</div>
4346

44-
<ul className="flex flex-wrap items-center gap-2">
47+
<ul className="scrollbar-none scroll-snap-x flex snap-mandatory flex-nowrap gap-2 overflow-x-scroll">
4548
{(skill as string[]).map(value => (
46-
<Chip key={value} size="small" component="li" label={value} />
49+
<Chip
50+
key={value}
51+
className=""
52+
size="small"
53+
component="li"
54+
variant="outlined"
55+
color="primary"
56+
label={value}
57+
/>
4758
))}
4859
</ul>
4960

50-
<div dangerouslySetInnerHTML={{ __html: marked((summary as string) || '') }} />
61+
<p
62+
dangerouslySetInnerHTML={{ __html: marked((summary as string) || '') }}
63+
className="text-neutral-500"
64+
/>
5165
</li>
5266
),
5367
);

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@next/eslint-plugin-next": "^15.5.0",
5252
"@stylistic/eslint-plugin": "^5.2.3",
5353
"@tailwindcss/postcss": "^4.1.12",
54+
"@tailwindcss/typography": "^0.5.16",
5455
"@types/eslint-config-prettier": "^6.11.3",
5556
"@types/jsonwebtoken": "^9.0.10",
5657
"@types/koa": "^3.0.0",

‎pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const theme = createTheme({
4141
},
4242
});
4343

44-
const clientCache = createEmotionCache({ enableCssLayer: true, key: 'css' });
44+
const clientCache = createEmotionCache({ enableCssLayer: true, key: 'css', prepend: true });
4545

4646
@observer
4747
export default class CustomApp extends App<I18nProps & { emotionCache: EmotionCache }> {

‎pages/_document.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ interface CustomDocumentProps {
3838
export default class CustomDocument extends Document<CustomDocumentProps> {
3939
static async getInitialProps(context: DocumentContext) {
4040
const cacheProps = await documentGetInitialProps(context, {
41-
emotionCache: createEmotionCache({ enableCssLayer: true, key: 'css' }),
41+
emotionCache: createEmotionCache({ enableCssLayer: true, key: 'css', prepend: true }),
4242
});
4343

4444
return {
@@ -74,7 +74,7 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
7474
* */}
7575
<link
7676
rel="stylesheet"
77-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap"
77+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chat,code,dark_mode,diversity_3,keyboard_arrow_down,language,light_mode,menu,translate,trending_up,visibility&display=swap"
7878
/>
7979
<script type="application/ld+json">{JSON.stringify(siteNameJsonLd)}</script>
8080
<script type="application/ld+json">{JSON.stringify(organizationJsonLd)}</script>

0 commit comments

Comments
 (0)