dev: Added social links to header

do-ob-io · Jun 28, 2024 · 368563b · 368563b
1 parent 5ed816c
commit 368563b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -64,6 +64,14 @@ export function Button<
 
   const Tag = as ?? (href ? AriaLink : AriaButton);
 
+  const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
+
+  const linkProps = {
+    href,
+    target: isExternal ? '_blank' : undefined,
+    rel: isExternal ? 'noopener noreferrer' : undefined,
+  };
+
   const variantClasses = variantStyles[variant];
   const sizeClasses = iconify ?
     sizeIconStyles[size] :
@@ -92,6 +100,7 @@ export function Button<
         iconify && 'rounded-full',
         className
       )}
+      {...linkProps}
       {...props}
     >
       {startContent && <span className="mr-2">{startContent}</span>}

diff --git a/packages/ui/src/widgets/Header/Header.stories.tsx b/packages/ui/src/widgets/Header/Header.stories.tsx
@@ -133,6 +133,7 @@ export const Extended: Story = {
     variant: 'extended',
     socials,
     brand: {
+      name: 'User Interface Library',
       logo: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true',
     },
     navigation: {

diff --git a/packages/ui/src/widgets/Header/HeaderExtended.tsx b/packages/ui/src/widgets/Header/HeaderExtended.tsx
@@ -1,6 +1,8 @@
 import { cn } from '@do-ob/ui/utility';
+import { Toolbar } from 'react-aria-components';
 import { Brand, Navigation } from '@do-ob/ui/widgets';
 import type { HeaderProps } from './Header.types';
+import { SocialButtons } from '../SocialButtons/SocialButtons';
 
 const maxWidthScreenStyles = {
   sm: 'max-w-screen-sm',
@@ -13,6 +15,7 @@ const maxWidthScreenStyles = {
 export function HeaderExtended({
   brand,
   navigation,
+  socials,
   maxWidth = '2xl',
   className,
   ...props
@@ -35,10 +38,10 @@ export function HeaderExtended({
         <div className="px-6 [grid-area:nav]">
           <Navigation {...navigation} style={{ flex: 2 }}/>
         </div>
-        <div className="[grid-area:tools]">
-          <div className="flex size-full items-center justify-end">
-            <button className="bg-blue-500">Test</button>
-          </div>
+        <div className="flex justify-end [grid-area:tools]">
+          <Toolbar>
+            <SocialButtons socials={socials} />
+          </Toolbar>
         </div>
       </div>
     </header>

diff --git a/packages/ui/src/widgets/Header/HeaderStandard.tsx b/packages/ui/src/widgets/Header/HeaderStandard.tsx
@@ -1,6 +1,8 @@
 import { cn } from '@do-ob/ui/utility';
 import { Brand, Navigation } from '@do-ob/ui/widgets';
 import type { HeaderProps } from './Header.types';
+import { Toolbar } from 'react-aria-components';
+import { SocialButtons } from '../SocialButtons/SocialButtons';
 
 const maxWidthScreenStyles = {
   sm: 'max-w-screen-sm',
@@ -13,6 +15,7 @@ const maxWidthScreenStyles = {
 export function HeaderStandard({
   brand,
   navigation,
+  socials,
   maxWidth = '2xl',
   className,
   ...props
@@ -31,7 +34,9 @@ export function HeaderStandard({
       )}>
         <Brand href={brand?.href ?? '/'} {...brand}/>
         <Navigation {...navigation} style={{ flex: 2 }}/>
-        <div className="size-full bg-green-500" style={{ flex: 1 }}>&nbsp;</div>
+        <Toolbar>
+          <SocialButtons socials={socials} />
+        </Toolbar>
       </div>
     </header>
   );

diff --git a/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx b/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx
@@ -17,7 +17,7 @@ const socialIcons: Record<Socials, () => Promise<React.ComponentType<React.HTMLA
 
 export async function SocialButtons({
   socials = [],
-  variant = 'faded',
+  variant = 'light',
   size = 'md',
   className,
   ...props
@@ -37,7 +37,7 @@ export async function SocialButtons({
   return (
     <Group
       className={cn(
-        'flex gap-2',
+        'flex gap-1',
         className,
       )}
       aria-label="Social links"