Updated next. Fixed link RSC fetch.

src/app/(main)/links/[linkId]/LinkHeader.tsx

@@ -1,4 +1,4 @@
-import { Icon, Text } from '@umami/react-zen';
+import { IconLabel } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useLink, useMessages, useSlug } from '@/components/hooks';
@@ -10,12 +10,9 @@ export function LinkHeader() {
   const link = useLink();
 
   return (
-    <PageHeader title={link.name} description={link.url} icon={<Link />} marginBottom="3">
-      <LinkButton href={getSlugUrl(link.slug)} target="_blank" prefetch={false}>
-        <Icon>
-          <ExternalLink />
-        </Icon>
-        <Text>{formatMessage(labels.view)}</Text>
+    <PageHeader title={link.name} description={link.url} icon={<Link />}>
+      <LinkButton href={getSlugUrl(link.slug)} target="_blank" prefetch={false} asAnchor>
+        <IconLabel icon={<ExternalLink />} label={formatMessage(labels.view)} />
       </LinkButton>
     </PageHeader>
   );

src/app/(main)/pixels/[pixelId]/PixelHeader.tsx

@@ -1,4 +1,4 @@
-import { Icon, Text } from '@umami/react-zen';
+import { IconLabel } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages, usePixel, useSlug } from '@/components/hooks';
@@ -10,12 +10,9 @@ export function PixelHeader() {
   const pixel = usePixel();
 
   return (
-    <PageHeader title={pixel.name} icon={<Grid2x2 />} marginBottom="3">
-      <LinkButton href={getSlugUrl(pixel.slug)} target="_blank" prefetch={false}>
-        <Icon>
-          <ExternalLink />
-        </Icon>
-        <Text>{formatMessage(labels.view)}</Text>
+    <PageHeader title={pixel.name} icon={<Grid2x2 />}>
+      <LinkButton href={getSlugUrl(pixel.slug)} target="_blank" prefetch={false} asAnchor>
+        <IconLabel icon={<ExternalLink />} label={formatMessage(labels.view)} />
       </LinkButton>
     </PageHeader>
   );

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -23,7 +23,6 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
     <PageHeader
       title={website.name}
       icon={<Favicon domain={website.domain} />}
-      marginBottom="3"
       titleHref={renderUrl(`/websites/${website.id}`, false)}
     >
       <Row alignItems="center" gap="6" wrap="wrap">

src/components/common/LinkButton.tsx

@@ -9,6 +9,7 @@ export interface LinkButtonProps extends ButtonProps {
   scroll?: boolean;
   variant?: any;
   prefetch?: boolean;
+  asAnchor?: boolean;
   children?: ReactNode;
 }
 
@@ -19,15 +20,22 @@ export function LinkButton({
   target,
   prefetch,
   children,
+  asAnchor,
   ...props
 }: LinkButtonProps) {
   const { dir } = useLocale();
 
   return (
     <Button {...props} variant={variant} asChild>
-      <Link href={href} dir={dir} scroll={scroll} target={target} prefetch={prefetch}>
-        {children}
-      </Link>
+      {asAnchor ? (
+        <a href={href} target={target}>
+          {children}
+        </a>
+      ) : (
+        <Link href={href} dir={dir} scroll={scroll} target={target} prefetch={prefetch}>
+          {children}
+        </Link>
+      )}
     </Button>
   );
 }

src/components/common/PageHeader.tsx

@@ -50,7 +50,9 @@ export function PageHeader({
           </Text>
         )}
       </Column>
-      <Row justifyContent="flex-end">{children}</Row>
+      <Row justifyContent="flex-end" alignItems="center">
+        {children}
+      </Row>
     </Grid>
   );
 }