-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add ProfilePanel component #650
base: master
Are you sure you want to change the base?
Conversation
dac03a6
to
cf4bb06
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just yelling from the sidelines, feel free to ignore.
flex-direction: column; | ||
gap: var(--gap--12); | ||
align-items: center; | ||
width: 318px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very specific sizing, and not using rems. Is this something that Twitch requires?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, they have a fixed max size for the panels 👍
const { profile } = props; | ||
|
||
return ( | ||
<div className={styles.root}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is everything a div :(
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div className={styles.content}> | ||
{profile.mods.map(function (mod, i) { | ||
return ( | ||
<div key={String(i)} className={styles.modrow}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mod name, or combination of name and version would be a better key. Although the data currently passed to Storybook is a bit 💩 in that regard.
<div className={styles.modName}>{mod.name}</div> | ||
<div className={styles.modVersion}>{mod.version}</div> | ||
</div> | ||
<a className={styles.modLink} href={mod.url}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be be more user-friendly if the whole .modrow
acted as a link instead of just the icon?
@@ -10,6 +10,7 @@ export * from "./components/Links/Links"; | |||
export * from "./components/MenuItem/MenuItem"; | |||
export * from "./components/MetaItem/MetaItem"; | |||
export * from "./components/PackageCard/PackageCard"; | |||
export * from "./components/ProfilePanel/ProfilePanel"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would "ProfileEmbed" oslt be a better name?
43b90d0
to
1da8262
Compare
This will be used by the twitch panel extension refs -
refs TS-1656 TS-1658
1da8262
to
585d40e
Compare
This will be used by the twitch panel extension
refs -