juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make all props used in components listed explicitly

Browse source
This commit is contained in:
Konrad Szwarc 2022-10-22 13:04:36 +02:00
parent e46a29e314
commit f258bc6cb4
11 changed files with 43 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/atoms/button.astro
View file

@ -3,7 +3,7 @@ export interface Props {
href: string;
}
const { props } = Astro;
const { href } = Astro.props;
const classes = {
main: 'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 select-none cursor-pointer',
@ -13,4 +13,4 @@ const classes = {
};
---
<a href={props.href} class:list={[classes.main, classes.hover, classes.active, classes.focus]}><slot /></a>
<a href={href} class:list={[classes.main, classes.hover, classes.active, classes.focus]}><slot /></a>

20
src/components/atoms/icon-button.astro
View file

@ -1,11 +1,14 @@
---
import type { IconName } from '@/types/icon';
import Icon from './icon';
type IconButtonSize = 'small' | 'large';
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
icon: string;
name: string;
export interface Props {
icon: IconName;
target?: astroHTML.JSX.AnchorHTMLAttributes['target'];
href: string;
size: IconButtonSize;
}
@ -14,11 +17,12 @@ const sizeMap: Record<IconButtonSize, string> = {
large: 'w-9 h-9',
};
const { icon, name, size, ...props } = Astro.props;
const { icon, href, target, size } = Astro.props;
---
<a
{...props}
href={href}
target={target}
class:list={[
'flex',
'items-center',
@ -29,12 +33,10 @@ const { icon, name, size, ...props } = Astro.props;
'active:translate-y-px',
'focus:outline-none',
'focus:ring-2',
'focus:ring-offset-2',
'focus:ring-primary-500',
sizeMap[size],
props.class,
]}
tabindex="-1"
>
<button class:list={['flex', 'items-center', 'justify-center', 'w-full', 'h-full']}>
<Icon client:load name={icon} size={16} />
</button>
</a>

6
src/components/atoms/labelled-value.astro
View file

@ -1,13 +1,13 @@
---
export interface Props extends astroHTML.JSX.HTMLAttributes {
export interface Props {
label: string;
value: string;
}
const { label, value, ...props } = Astro.props;
const { label, value } = Astro.props;
---
<div {...props} class:list={['text-base', props.class]}>
<div class="text-base">
<span class="font-medium text-gray-700">{label}:</span>
<span class="font-normal text-gray-500">{value}</span>
</div>

8
src/components/atoms/section-card.astro
View file

@ -1,7 +1 @@
---
export interface Props extends astroHTML.JSX.HTMLAttributes {}
const { props } = Astro;
---
<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-md', props.class]}><slot /></div>
<div class="p-8 bg-white rounded-2xl shadow-md"><slot /></div>

11
src/components/atoms/sidebar-item.astro
View file

@ -1,24 +1,23 @@
---
import type { Icon as IconName } from '@/types/icon';
import type { IconName } from '@/types/icon';
import Icon from './icon';
export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
export interface Props {
icon: IconName;
active?: boolean;
}
const { props } = Astro;
const { icon, active } = Astro.props;
---
<button
type="button"
class:list={[
`inline-flex justify-center items-center h-10 w-10 rounded-lg transition hover:bg-primary-600`,
props.active && 'bg-primary-600',
props.class,
active && 'bg-primary-600',
]}
>
<Icon client:load name={props.icon} size={20} color={props.active ? 'white' : 'gray'} />
<Icon client:load name={icon} size={20} color={active ? 'white' : 'gray'} />
<slot />
</button>

4
src/components/atoms/skill-level-tile.astro
View file

@ -1,9 +1,11 @@
---
export interface Props extends astroHTML.JSX.HTMLAttributes {
export interface Props {
skillLevel: number;
tileLevel: number;
}
const { skillLevel, tileLevel } = Astro.props;
const isFilled = skillLevel >= tileLevel;
---

8
src/components/organisms/sidebar.astro
View file

@ -1,9 +1,3 @@
---
export interface Props extends astroHTML.JSX.HTMLAttributes {}
const { props } = Astro;
---
<nav class:list={['flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md', props.class]}>
<nav class="flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md">
<slot />
</nav>

7
src/components/organisms/skill-level.astro
View file

@ -1,14 +1,15 @@
---
import SkillLevelTile from '@/atoms/skill-level-tile.astro';
export interface Props extends astroHTML.JSX.HTMLAttributes {
export interface Props {
skillLevel: number;
}
const { skillLevel } = Astro.props;
const LEVELS = [1, 2, 3, 4, 5];
const levels = [1, 2, 3, 4, 5];
---
<div class:list={['flex', 'gap-1']}>
{LEVELS.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
{levels.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
</div>

16
src/components/organisms/skill.astro
View file

@ -5,19 +5,17 @@ import type { LevelledSkill } from '@/types/skills-section';
import SkillLevel from './skill-level.astro';
export interface Props extends astroHTML.JSX.HTMLAttributes {
levelledSkill: LevelledSkill;
}
export interface Props extends LevelledSkill {}
const { levelledSkill, ...props } = Astro.props;
const { url, icon, iconColor, name, level } = Astro.props;
---
<div class:list={['flex', 'flex-col', 'gap-2']} {...props}>
<div class:list={['flex', 'flex-col', 'gap-2']}>
<div class:list={['flex', 'gap-2', 'h-5']}>
<a href={levelledSkill.url} target="_blank" rel="noopener noreferrer">
<Icon client:load name={levelledSkill.icon} color={levelledSkill.iconColor} size={20} />
<a href={url} target="_blank" rel="noopener noreferrer">
<Icon client:load name={icon} color={iconColor} size={20} />
</a>
<Typography variant="tile-subtitle" class="text-gray-700">{levelledSkill.name}</Typography>
<Typography variant="tile-subtitle" class="text-gray-700">{name}</Typography>
</div>
<SkillLevel skillLevel={levelledSkill.level} />
<SkillLevel skillLevel={level} />
</div>

8
src/pages/playground/icon-button.astro
View file

@ -3,8 +3,8 @@ import IconButton from '@/atoms/icon-button.astro';
---
<div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
<IconButton icon="fa6-brands:facebook-f" name="Facebook" size="small" href="https://facebook.com/" target="_blank" />
<IconButton icon="fa6-brands:github" name="GitHub" size="small" href="https://github.com/" target="_blank" />
<IconButton icon="fa6-brands:linkedin-in" name="LinkedIn" size="large" href="https://linkedin.com/" target="_blank" />
<IconButton icon="fa6-brands:twitter" name="Twitter" size="large" href="https://twitter.com/" target="_blank" />
<IconButton icon="fa6-brands:facebook-f" size="small" href="#" />
<IconButton icon="fa6-brands:github" size="small" href="#" />
<IconButton icon="fa6-brands:linkedin-in" size="large" href="#" />
<IconButton icon="fa6-brands:twitter" size="large" href="#" />
</div>

2
src/pages/playground/skill.astro
View file

@ -11,4 +11,4 @@ const levelledSkill: LevelledSkill = {
};
---
<Skill levelledSkill={levelledSkill} />
<Skill {...levelledSkill} />