feat(docs): page improvements

packages/components/link/src/link.tsx

@@ -1,5 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
 
 import {UseLinkProps, useLink} from "./use-link";
 
@@ -10,7 +11,7 @@ const Link = forwardRef<LinkProps, "a">((props, ref) => {
     Component,
     children,
     showAnchorIcon,
-    anchorIcon = <LinkIcon className="flex mx-1 text-current self-center" />,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
     getLinkProps,
   } = useLink({
     ...props,

packages/components/snippet/src/snippet.tsx

@@ -12,6 +12,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
   const {
     Component,
     domRef,
+    preRef,
     children,
     slots,
     classNames,
@@ -89,7 +90,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
     }
 
     return (
-      <pre className={slots.pre({class: classNames?.pre})}>
+      <pre ref={preRef} className={slots.pre({class: classNames?.pre})}>
         {!hideSymbol && (
           <span className={slots.symbol({class: classNames?.symbol})}>{symbolBefore}</span>
         )}

packages/components/snippet/src/use-snippet.ts

@@ -6,7 +6,7 @@ import {useDOMRef} from "@nextui-org/dom-utils";
 import {clsx, dataAttr, ReactRef} from "@nextui-org/shared-utils";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useFocusRing} from "@react-aria/focus";
-import {useMemo, useCallback, ReactElement} from "react";
+import {useMemo, useCallback, ReactElement, useRef} from "react";
 import {TooltipProps} from "@nextui-org/tooltip";
 import {ButtonProps} from "@nextui-org/button";
 export interface UseSnippetProps
@@ -148,6 +148,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
   const Component = as || "div";
 
   const domRef = useDOMRef(ref);
+  const preRef = useRef<HTMLPreElement>(null);
 
   const {copy, copied} = useClipboard({timeout});
 
@@ -188,6 +189,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
     if (disableCopy) {
       return;
     }
+
     let value = "";
 
     if (typeof children === "string") {
@@ -196,8 +198,10 @@ export function useSnippet(originalProps: UseSnippetProps) {
       value = children.join("\n");
     }
 
-    copy(value);
+    const valueToCopy = value || preRef.current?.textContent || "";
-    onCopyProp?.(value);
+
+    copy(valueToCopy);
+    onCopyProp?.(valueToCopy);
   }, [copy, disableCopy, onCopyProp, children]);
 
   const defaultCopyButtonProps: ButtonProps = {
@@ -235,6 +239,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
     Component,
     as,
     domRef,
+    preRef,
     children,
     slots,
     classNames,

packages/core/theme/src/components/link.ts

@@ -68,7 +68,7 @@ const link = tv({
     {
       isBlock: true,
       color: "foreground",
-      class: "hover:after:bg-foreground/20",
+      class: "hover:after:bg-foreground/10",
     },
     {
       isBlock: true,
@@ -110,8 +110,7 @@ const link = tv({
   },
 });
 
-// icon calculated classes
+export const linkAnchorClasses = "flex mx-1 text-current self-center";
-// "flex mx-1 text-current self-center"
 
 export type LinkVariantProps = VariantProps<typeof link>;
 

packages/utilities/shared-icons/src/arrow-left.tsx

@@ -0,0 +1,31 @@
+import {IconSvgProps} from "./types";
+
+export const ArrowLeftIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...otherProps}
+  >
+    <path
+      d="M9.57 5.92993L3.5 11.9999L9.57 18.0699"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M20.5 12H3.67004"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

packages/utilities/shared-icons/src/index.ts

@@ -28,6 +28,7 @@ export * from "./edit";
 export * from "./delete";
 export * from "./eye";
 export * from "./arrow-right";
+export * from "./arrow-left";
 export * from "./link";
 
 // sets

pnpm-lock.yaml

@@ -302,6 +302,9 @@ importers:
       '@react-aria/selection':
         specifier: ^3.14.0
         version: 3.14.0(react@18.2.0)
+      '@react-aria/ssr':
+        specifier: ^3.6.0
+        version: 3.6.0(react@18.2.0)
       '@react-aria/utils':
         specifier: ^3.16.0
         version: 3.16.0(react@18.2.0)