-
Notifications
You must be signed in to change notification settings - Fork 20
@theguild/components v7 #1587
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
@theguild/components v7 #1587
Conversation
🦋 Changeset detectedLatest commit: 489e458 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
📚 Storybook DeploymentThe latest changes are available as preview in: https://8ffe282d.the-guild-docs-storybook.pages.dev |
[ | ||
'Documentation', | ||
PaperIcon, | ||
isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs', | ||
], | ||
['Status', TargetIcon, 'https://status.graphql-hive.com/'], | ||
[ | ||
'Product Updates', | ||
RightCornerIcon, | ||
isHive | ||
? '/product-updates' | ||
: 'https://the-guild.dev/graphql/hive/product-updates', | ||
], | ||
['Blog', PencilIcon, 'https://the-guild.dev/blog'], | ||
['GitHub', GitHubIcon, 'https://github.com/kamilkisiela/graphql-hive'], | ||
] as const |
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.
use object, not tuple
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.
This is immediately mapped into JSX, so any property keys just bloat the bundle — this is why I just used tuples here.
Do you guys have a convention against tuples? Also cc @saihaj because I think he gave me the same comment elsewhere.
I don't mind changing it, I'm just curious.
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.
in future Nextra 4 _meta.js
will be server components, so this will not increase bundle
[ | ||
'YouTube', | ||
YouTubeIcon, | ||
'https://www.youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd', | ||
], | ||
['X', TwitterIcon, 'https://x.com/theguilddev'], | ||
['LinkedIn', LinkedInIcon, 'https://www.linkedin.com/company/the-guild-software/'], | ||
['Discord', DiscordIcon, 'https://discord.com/invite/xud7bH9'], |
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.
same, object, not tuple
// These icons are _different_ than the ones used elsewhere. | ||
// e.g. Discord is a "chat" bubble with the Discord logo in the center. | ||
|
||
function YouTubeIcon(props: React.SVGProps<SVGSVGElement>) { |
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.
to .svg
); | ||
} | ||
|
||
function TwitterIcon(props: React.SVGProps<SVGSVGElement>) { |
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.
to .svg
); | ||
} | ||
|
||
function LinkedInIcon(props: React.SVGProps<SVGSVGElement>) { |
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.
to svg
); | ||
} | ||
|
||
function DiscordIcon(props: React.SVGProps<SVGSVGElement>) { |
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.
to svg
const marker = markerRef.current; | ||
const observer = new IntersectionObserver(entries => { | ||
onChangeRef.current(entries[0].boundingClientRect.y < -1); | ||
}, {}); |
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.
}, {}); | |
}); |
onChangeRef.current = onChange; | ||
|
||
useEffect(() => { | ||
if (mounted && markerRef.current && 'IntersectionObserver' in window) { |
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.
if (mounted && markerRef.current && 'IntersectionObserver' in window) { | |
if (mounted && markerRef.current) { |
it's available in all modern browsers
> | ||
<NavigationMenuPrimitive.Viewport | ||
className={cn( | ||
'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', |
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.
'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', | |
'relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-[--radix-navigation-menu-viewport-width] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', |
use shorthand
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.
Good catch
render() { | ||
return <ToolsAndLibrariesCards />; | ||
}, |
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.
render() { | |
return <ToolsAndLibrariesCards />; | |
}, | |
render: ToolsAndLibrariesCards, |
const cardDecorations = { | ||
[PRODUCTS.HIVE.name](props: React.SVGAttributes<SVGSVGElement>) { | ||
return ( | ||
<svg |
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.
to svg
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
…and Prettier
No description provided.