From f3c72e3a586603ca82b62eece24dba36f71ed9d3 Mon Sep 17 00:00:00 2001
From: "taisuke.fujita" <glassonion999@gmail.com>
Date: Thu, 12 Oct 2023 17:09:37 +0900
Subject: [PATCH] add external link icon

---
 examples/package.json                 |  2 +-
 examples/src/App.tsx                  |  3 ++
 packages/core/package.json            |  2 +-
 packages/core/src/components/Link.tsx | 44 +++++++++------------------
 4 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/examples/package.json b/examples/package.json
index b00c4ab..3e8f8c6 100644
--- 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
index 34ddcc4..2c5f87c 100644
--- 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
index ccd057b..21af348 100644
--- 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
index 978557a..dd8c986 100644
--- 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>
     )
   }