style: power k page improvements.

markdoc/tags.js

@@ -8,6 +8,7 @@ import { ExpansionTile } from '@/components/ExpansionTile'
 import { UrlEmbed } from '@/components/UrlEmbed'
 import React from 'react'
 import { InlineCode } from '@/components/Inline-code'
+import IconCallout from '@/components/IconCallout'
 
 const tags = {
   callout: {
@@ -22,6 +23,15 @@ const tags = {
     },
     render: Callout,
   },
+  'icon-callout': {
+    attributes: {
+      title: { type: String },
+      icon: { type: String },
+      image: { type: Boolean, default: false },
+      className: { type: String, default: '' },
+    },
+    render: IconCallout,
+  },
   figure: {
     selfClosing: true,
     attributes: {

src/components/IconCallout.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Image from 'next/image'
+
+const IconCallout = ({ title, children, icon, image = false, className }) => {
+  return (
+    <div className="h-full py-4">
+      <div
+        className={`flex h-full gap-4 rounded-lg border-2  p-4 ${className}`}
+      >
+        <div>
+          {image ? (
+            <div className="h-6 w-6 flex-shrink-0">
+              <Image src={icon} alt="icon" className="mt-1.5 h-6 w-6" />
+            </div>
+          ) : (
+            <div className="relative -mt-1 mb-auto flex h-4 flex-shrink-0 text-2xl">
+              {icon}
+            </div>
+          )}
+        </div>
+        <div>
+          {title && <div className="text-lg font-semibold">{title}</div>}
+          {children && (
+            <div className={`-mb-2 text-gray-500  ${!title && '-mt-2'} `}>
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IconCallout

src/pages/power-k.md

@@ -18,28 +18,35 @@ Power K, formerly called the Command Menu or just CMD + K, is a list of shortcut
 - Expand the scope of this search to include projects in your workspace with just a toggle—powerful when you have several projects and are hunting an issue in all of them.
   ![Untitled](/images/power-k/search-2.png)
 
-  🎯 **Roadmap item**
+  {% icon-callout title="Roadmap item" icon="🎯" %}
   Search profiles, comments, and issue descriptions
+  {% /icon-callout %}
 
 ### Quick access
 
 - Workspace and preference settings
+
   Quickly toggle between light and dark mode or access workspace settings for APIs and Webhooks in just two clicks.
   ![Untitled](/images/power-k/quick-access-1.png)
+
 - Keyboard shortcuts
+
   Get to your list of keyboard shortcuts with the Power K menu in two steps.
   ![Untitled](/images/power-k/quick-access-2.png)
+
 - Documentation and Support
+
   Chat with us, see our docs, or report a bug—all from the Power K menu.
 
 ### Create
 
 - Create anything—projects, issues, cycles, modules, views, pages, and even workspaces, using Power K's create options.
-
-![create_project.mp4](/images/power-k/create-project.gif)
+  ![create_project.mp4](/images/power-k/create-project.gif)
 
 - Press ⌘ + K on an issue page to changing states, priority, assignments or just to copy issue links.
+  ![Untitled](/images/power-k/create.png)
 
-![Untitled](/images/power-k/create.png)
+  {% icon-callout icon="🎯" %}
+  What else should Power K, empower? [Let us know.](https://github.com/makeplane/plane)
+  {% /icon-callout %}
 
-🎯 What else should Power K, empower? [Let us know.](https://github.com/makeplane/plane)