feat: move doc link to top with name

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginCard.tsx

@@ -60,10 +60,22 @@ const PluginCard = ({
             <div className="flexbox-col dc__gap-12 w-100">
                 <div className="flexbox-col dc__gap-8">
                     <div className="flexbox-col dc__gap-4">
-                        <div className="flexbox dc__gap-4">
-                            <h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20 plugin-card__title">{name}</h4>
-                            {!isSelectable && (
-                                <span className="dc__truncate cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
+                        <div className="flexbox dc__gap-6 w-100 dc__align-start dc__content-space">
+                            <div className="flexbox dc__gap-4">
+                                <h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20 plugin-card__title">{name}</h4>
+                                {!isSelectable && (
+                                    <span className="dc__truncate cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
+                                )}
+                            </div>
+
+                            {docLink && (
+                                <div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
+                                    <a href={docLink} className="anchor" target="_blank" rel="noopener noreferrer">
+                                        Learn more
+                                    </a>
+
+                                    <ICBookOpen className="icon-dim-12 dc__no-shrink" />
+                                </div>
                             )}
                         </div>
 
@@ -75,22 +87,7 @@ const PluginCard = ({
                 </div>
 
                 {/* Tag container */}
-                <div className="flexbox dc__gap-6 w-100 dc__align-start">
-                    <PluginTagsContainer tags={tags} />
-
-                    {/* Adding a div with min width so that tags won't have layout shift on hover and will give flex-grow as 1 with flex end so that it sticks to end even if tags don't exist */}
-                    <div className="mw-84 flexbox dc__content-end flex-grow-1">
-                        {docLink && (
-                            <div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
-                                <a href={docLink} className="anchor" target="_blank" rel="noopener noreferrer">
-                                    Learn more
-                                </a>
-
-                                <ICBookOpen className="icon-dim-12 dc__no-shrink" />
-                            </div>
-                        )}
-                    </div>
-                </div>
+                <PluginTagsContainer tags={tags} />
             </div>
         </div>
     )

src/Shared/Components/Plugin/PluginTagsContainer.tsx

@@ -1,12 +1,12 @@
 import { PluginTagsContainerProps } from './types'
 
-const PluginTagsContainer = ({ tags }: PluginTagsContainerProps) => {
+const PluginTagsContainer = ({ tags, rootClassName }: PluginTagsContainerProps) => {
     if (!tags?.length) {
         return null
     }
 
     return (
-        <div className="flexbox dc__gap-6 flex-wrap">
+        <div className={`flexbox dc__gap-6 flex-wrap ${rootClassName}`}>
             {tags.map((tag) => (
                 <div className="flexbox px-6 br-4 bcn-1 dc__align-items-center dc__mxw-160" key={tag}>
                     <span className="dc__mxw-160 dc__truncate cn-8 fs-11 fw-4 lh-20">{tag}</span>

src/Shared/Components/Plugin/types.ts

@@ -195,4 +195,5 @@ export interface PluginCardSkeletonListProps {
 
 export interface PluginTagsContainerProps {
     tags: string[]
+    rootClassName?: string
 }