feat(core): add i18n icon

core/src/components/Popover.scss

@@ -24,12 +24,12 @@
       height: 0;
       border: 6px solid transparent;
     }
-    &[data-position=top]::before {
+    &[data-position^=top]::before {
       border-top-color: var(--vscode-dropdown-background);
       left: -6px;
       bottom: -16px;
     }
-    &[data-position=bottom]::before {
+    &[data-position^=bottom]::before {
       border-bottom-color: var(--vscode-dropdown-background);
       left: -6px;
       top: -34px;

core/src/components/Popover.tsx

@@ -66,15 +66,25 @@ export function Popover(props: PopoverProps) {
       popper.current?.update()
     }
   }, [visible])
+  const classname = `${prefix}-reference ${prefix}-${trigger}`
+    + (props.className ? ' ' + props.className : '')
   return <>
     <div
       ref={setReferenceElement}
-      className={
-      `${prefix}-reference ${prefix}-${trigger}`
-        + (props.className ? ' ' + props.className : '')
-      }
+      className={classname}
       style={props.style}
       onClick={() => {
+        function clickOther(event: MouseEvent) {
+          if (event.target instanceof HTMLElement) {
+            if (!event.target.closest(`.${prefix}`)) {
+              setVisible(false)
+              removeEventListener('click', clickOther)
+            }
+          }
+        }
+        if (!visible) {
+          addEventListener('click', clickOther)
+        }
         if (trigger === 'click') {
           setVisible(!visible)
         }

src/App.scss

@@ -20,6 +20,7 @@
   > .opts {
     display: flex;
     align-items: center;
+    gap: 10px;
   }
 }
 

src/App.tsx

@@ -11,6 +11,7 @@ import {
 } from '@power-playground/core'
 
 import { ThemeSwitcher } from './components/ThemeSwitcher.tsx'
+import { I18N } from './components/I18N.tsx'
 
 const plugins = import.meta
   .glob([
@@ -48,6 +49,7 @@ export function App() {
           >Power Playground</a>
         </h1>
         <div className='opts'>
+          <I18N />
           <ThemeSwitcher />
         </div>
       </header>

src/components/I18N.scss

@@ -0,0 +1,22 @@
+.i18n {
+  > .icon {
+    display: flex;
+    align-items: center;
+    width: 24px;
+    &:focus {
+      > .option-icon:hover {
+        filter: drop-shadow(0 0 8px var(--fr-cr));
+      }
+    }
+    > .option-icon {
+      filter: drop-shadow(0 0 0 var(--fr-cr));
+      transition: .3s;
+      &:hover {
+        filter: drop-shadow(0 0 8px var(--fr-cr));
+      }
+    }
+    > .option-icon > path:nth-child(2) {
+      fill: var(--fr-cr);
+    }
+  }
+}

src/components/I18N.tsx

@@ -0,0 +1,21 @@
+import './I18N.scss'
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Popover } from '@power-playground/core/src/components/Popover.tsx'
+
+export function I18N() {
+  return <Popover
+    className='i18n'
+    content='Not implemented yet'
+    placement='bottom-start'
+    trigger='click'
+    offset={[0, 10]}
+    >
+    <div
+      className='icon'
+      dangerouslySetInnerHTML={{
+        __html: '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="option-icon" data-v-ff4d0b2b=""><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path></svg>'
+      }}
+    />
+  </Popover>
+}