add external link icon

glassonion1 · Oct 12, 2023 · f3c72e3 · f3c72e3
1 parent ac08aa4
commit f3c72e3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 32 deletions.
diff --git a/examples/package.json b/examples/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@sakura-ui/config": "^0.1.5",
-    "@sakura-ui/core": "^0.1.16",
+    "@sakura-ui/core": "^0.1.17",
     "@sakura-ui/forms": "^0.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/src/App.tsx b/examples/src/App.tsx
@@ -61,6 +61,9 @@ const App = () => {
         <Icon icon="shopping_cart" className="text-sea-600" />
         test3 <Link>link text here</Link>
       </p>
+      <p>
+        External link: <Link href="https://google.com">link text here</Link>
+      </p>
       <div className="w-1/3 my-4">
         <Card>
           <CardBody>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -1,40 +1,12 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-const getFileType = (url: string) => {
-  const converted = url.toLowerCase()
-
-  if (converted.endsWith('.pdf')) {
-    return 'PDF'
-  }
-  if (converted.endsWith('.doc') || converted.endsWith('.docx')) {
-    return 'Word'
-  }
-  if (converted.endsWith('.xls') || converted.endsWith('.xlsx')) {
-    return 'Excel'
-  }
-  if (converted.endsWith('.csv')) {
-    return 'CSV'
-  }
-  if (converted.endsWith('.json')) {
-    return 'JSON'
-  }
-  if (converted.endsWith('.ndjson')) {
-    return 'NDJSON'
-  }
-  if (converted.includes('youtu.be')) {
-    return 'YouTube'
-  }
-  return null
-}
-
 export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
 
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   (props, ref) => {
     const { className, children, ...restProps } = props
     const href = props.href ?? ''
-    const fileType = getFileType(href)
 
     const style = `
       rounded-sm
@@ -51,6 +23,17 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       disabled:border-sumi-500
     `
 
+    const iconStyle = `
+      inline-block
+      align-middle
+      ml-0.5
+      text-sumi-700
+      font-icon
+      font-light
+      leading-4
+      antialiased
+    `
+
     if (href.startsWith('http')) {
       return (
         <a
@@ -62,14 +45,15 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           ref={ref}
         >
           {children}
-          {fileType ? `（${fileType}）` : null}
+          <span className={cx(iconStyle)} aria-hidden="true">
+            open_in_new
+          </span>
         </a>
       )
     }
     return (
       <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
         {children}
-        {fileType ? `（${fileType}）` : null}
       </a>
     )
   }