Reverted new GridItem design; now placing 2 buttons

src/components/GridItem.astro

@@ -3,67 +3,69 @@ import SimpleMenu from '../layouts/SimpleMenu.astro';
 import Icon from './Icon.astro';
 
 export interface Props {
-    id: string;
     title: string;
     text: string;
     url: string;
-    width?: number;
+    width?: number;  // rem
+    btnAttr?: Object;
+    btnIcon?: string;
 }
 
 const {
-    id,
     title, text, url,
     width = 9,
+    btnAttr = null,
+    btnIcon = "",
 } = Astro.props;
+
+// add gi-btn class to the secondary button
+if (btnAttr != null) {
+    btnAttr["class"] = (btnAttr["class"] || "") + " gi-btn";
+}
 ---
 
-<div class="gi" id={id}>
-    <div class="gi-row">
-        <div class="gi-main">
-            <span class="icon-wrapper">
-                <slot name="icon-primary" />
+<div class="gi">
+    <div class="gi-main">
+        <span class="icon-wrapper">
+            <slot name="icon-primary" />
+        </span>
+        <span class="content" style={{width: `${width}rem`}}>
+            <span class="title">
+                <slot name="title">
+                    {title}
+                </slot>
             </span>
-            <span class="content">
-                <span class="title">
-                    <slot name="title">
-                        {title}
-                    </slot>
-                </span>
-                <span class="text">
-                    <slot name="text">
-                        {text}
-                    </slot>
-                </span>
+            <span class="text">
+                <slot name="text">
+                    {text}
+                </slot>
             </span>
-        </div>
-        <a href={`#${id}`} class="gi-btn gi-btn-expand">
-            <span class="icon-wrapper">
-                <Icon code="&#xf107;" />
-            </span>
-        </a>
-        <a href="#scroll" class="gi-btn gi-btn-close">
-            <span class="icon-wrapper">
-                <Icon code="&#xf106;" />
-            </span>
-        </a>
-    </div>
-    <div class="gi-options">
-        <SimpleMenu jcc="center">
-            <slot name="options" />
-        </SimpleMenu>
-    </div>
-    <div class="gi-options gi-note">
-        <slot name="note" />
+        </span>
     </div>
+    {
+        btnAttr != null ?
+        <a {...btnAttr}>
+            <span class="icon-wrapper">
+                <Icon code={btnIcon} />
+            </span>
+        </a> :
+        ""
+    }
+    <a href={url} target="_blank" class="gi-btn">
+        <span class="icon-wrapper">
+            <Icon code="&#xf35d;" />
+        </span>
+    </a>
 </div>
 
-<style lang="less" define:vars={{width: `${width}rem`}}>
+<style lang="less">
     .gi {
         //     vertical horizontal
         padding: 0.4rem 0.6rem;
 
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
+        align-items: center;
 
         min-height: 3rem;
         border-radius: var(--bdrs);
@@ -71,25 +73,6 @@ const {
         &:hover {
             background: var(--accent-bg);
         }
-
-        .gi-options { display: none }
-        .gi-btn-close { display: none }
-        .gi-btn-expand { display: flex }
-
-        &:target {
-            background: var(--accent-bg);
-
-            .gi-options { display: block }
-
-            .gi-btn-close { display: flex }
-            .gi-btn-expand { display: none }
-        }
-    }
-
-    .gi-row {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
     }
 
     .gi-main {
@@ -119,7 +102,7 @@ const {
             display: flex;
             flex-direction: column;
 
-            width: var(--width);
+            // width is set above using style={{}}
             overflow: hidden;
 
             .title {
@@ -135,14 +118,13 @@ const {
 
     .gi-btn {
         position: relative;
-        font-size: 1.1rem;
 
         display: flex;
         flex-direction: column;
         align-items: center;
 
         .icon-wrapper {
-            @icon-size: 1.25rem;
+            @icon-size: 1.75rem;
 
             width: @icon-size;
             font-size: @icon-size;

src/components/Profile.astro

@@ -1,7 +1,6 @@
 ---
 import GridItem from './GridItem.astro';
 import Icon from './Icon.astro';
-import MenuItem from './MenuItem.astro';
 
 export interface Props {
     app: string;
@@ -15,31 +14,20 @@ export interface Props {
 const {
     app, url, name, icon,
     copyName = false,
-    note = "",
 } = Astro.props;
 ---
 
 <GridItem
-    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
     width={9.5}
+    btnIcon="&#xf0c5;"
+    btnAttr={{
+        "href": "javascript:void(0)",
+        "class": "profile-copy",
+        "data-js": copyName ? name : url,
+    }}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Fragment slot="options">
-        <MenuItem
-            name=""
-            link="javascript:void(0)"
-            icon="&#xf0c5;"
-            classes={["profile-copy"]}
-            datajs={copyName ? name : url}
-        />
-        <MenuItem
-            name="Open"
-            link={url}
-            icon="&#xf360;"
-            tblank
-        />
-    </Fragment>
 </GridItem>
 
 <script>