Skip to content
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

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Add ProfilePanel component #650

wants to merge 2 commits into from

Conversation

Oksamies
Copy link
Contributor

@Oksamies Oksamies commented Apr 1, 2023

This will be used by the twitch panel extension

refs -

Copy link
Contributor

@anttimaki anttimaki left a 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;
Copy link
Contributor

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?

Copy link
Contributor Author

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}>
Copy link
Contributor

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 :(

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

<div className={styles.content}>
{profile.mods.map(function (mod, i) {
return (
<div key={String(i)} className={styles.modrow}>
Copy link
Contributor

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}>
Copy link
Contributor

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";
Copy link
Contributor

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?

@Oksamies Oksamies changed the base branch from master to cyberstorm-nextjs-fixings April 27, 2023 05:56
@Oksamies Oksamies force-pushed the twitch-extension branch 2 times, most recently from 43b90d0 to 1da8262 Compare April 27, 2023 07:53
@Oksamies Oksamies changed the base branch from cyberstorm-nextjs-fixings to master April 27, 2023 07:54
This will be used by the twitch panel extension

refs -
@Oksamies Oksamies marked this pull request as draft November 30, 2023 21:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants