[Docs] Added new EntrySearch component

documentation/docs/docs/03-creating-stories/01-interactions/01-options.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Adding Options
 
@@ -16,7 +17,7 @@ To create an option, follow these steps:
 1. Right-click on your entry and select `+ Link with ...`.
 2. Search for `Add Option` and click on the + icon to add it to your sequence.
 
-<Image img={require("../../assets/interactions/add-option.png")} alt="Adding an option entry" />
+<EntrySearch entryName='option' />
 
 ## Configuring a Option
 

documentation/docs/docs/03-creating-stories/01-interactions/02-items.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Giving items
 
@@ -19,7 +20,7 @@ To add a give item entry, follow these steps:
 1. Right-click on your entry and select `+ Link with ...`.
 2. Search for `Add give item` and click on the + icon to add it to your sequence.
 
-<Image img={require("../../assets/interactions/add-give-item.png")} alt="Adding a give item entry" />
+<EntrySearch entryName='give_item' />
 
 ## Configuring the give item
 

documentation/docs/docs/03-creating-stories/01-interactions/index.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # First Interaction
 
@@ -23,7 +24,7 @@ An interaction occurs when the player interacts with something and triggers an e
 
 Let's get started by creating an entry. Click on the + icon in the top right corner of the panel and search for `on interact with block`. Add it to your page by clicking on the + icon.
 
-<Image img={require("../../assets/interactions/on-interact-with-block.png")} alt="Adding an interact with block entry" width={400} />
+<EntrySearch entryName='on_interact_with_block'/>
 
 ### Configuring the interaction
 

documentation/docs/docs/03-creating-stories/02-cinematics/01-dialogue.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player"; 
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Adding dialogues
 
@@ -12,8 +13,7 @@ In this tutorial, you will learn how to add dialogues to your interactions.
 In cinematic their are a variety of dialogues available like: `spoken`, `actionbar`, `title`, `subtitle`. For this tutorial we will use actionbar but all others have similar features.
 
 First click on the + icon in the top right corner of the panel and search for `Add Actionbar Dialogue Cinematic`. Add it to your page by clicking on the + icon.
-
-<Image img={require("../../assets/cinematics/add-actionbar-dialogue-cinematic.png")} alt="Adding an actionbar dialogue entry" width={400} />
+<EntrySearch entryName='actionbar_dialogue_cinematic'/>
 
 ### Configuring the dialogue
 Now we need to configure the dialogue. 

documentation/docs/docs/03-creating-stories/02-cinematics/03-entities.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Adding entities
 
@@ -12,8 +13,7 @@ In this tutorial, you will learn how to add entities to your interactions.
 ## Adding an entity
 Firstly click on the + icon in the top right corner of the panel and search for `Add Entity Cinematic`. Add it to your page by clicking on the + icon.
 
-<Image img={require("../../assets/cinematics/add-entity-cinematic.png")} alt="Adding an entity cinematic entry" width={400} />
-
+<EntrySearch entryName='entity_cinematic'/>
 ### Selecting the definition
 Now in the inspector, click on `Select a entity_definition` and select the type of entity you want to have as an NPC, but for this tutorial, we will use the `Add Npc Definition`. Now you will need to select a manifest page or create one by clicking on `Add manifest`.
 

documentation/docs/docs/03-creating-stories/02-cinematics/04-first-join.mdx

@@ -1,7 +1,8 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
-# First Join Cinematic Tutorial
+# First Join Cinematic
 
 :::info[Before Starting]
 Before starting, it's recommended to read the following sections: [Interactions](../01-interactions/index.mdx), [Cinematics](./index.mdx), and [Facts](../03-facts/index.mdx). Ensure you have a sequence and a cinematic page created.
@@ -12,7 +13,7 @@ In this tutorial, you'll learn how to create a cinematic that plays when a playe
 ## Adding the Join Entry
 First, we need to add the `Add On Player Join` entry to our sequence. This can be done by clicking on the + icon in the top right corner of the panel and searching for `Add On Player Join`. Add it to your page by clicking on the + icon.
 
-<Image img={require("../../assets/cinematics/add-on-player-join.png")} alt="Add-On-Player-Join" width={400} />
+<EntrySearch entryName='on_player_join'/>
 
 ## Waiting for Interaction
 :::danger[Early Start Cinematic]

documentation/docs/docs/03-creating-stories/02-cinematics/index.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Cinematics
 
@@ -19,7 +20,7 @@ Let's get started by creating a simple camera cinematic.
 ### Adding a camera cinematic
 Firstly click on the + icon in the top right corner of the panel and search for `Add Camera Cinematic`. Add it to your page by clicking on the + icon.
 
-<Image img={require("../../assets/cinematics/add-camera-cinematic.png")} alt="Adding a camera cinematic entry" width={400} />
+<EntrySearch entryName='cinematic'/>
 
 ### Creating a segment
 Now we need to add a segment to our track. You can do this by clicking on the `New Camera Cinematic` entry in your page and by operations clicking on `Add Segment`(1).

documentation/docs/docs/03-creating-stories/04-entity-adapter/index.mdx

@@ -1,5 +1,6 @@
 import Player from "@site/src/components/Player";
 import Image from "@site/src/components/Image";
+import EntrySearch from "@site/src/components/EntrySearch";
 
 # Entities & NPC's
 
@@ -34,7 +35,7 @@ If you need more information on how to create a page, see the [Layout](../../02-
 Next, you have to define the NPC. Click the `Add Entry` button or the `+` in the top right corner,
 then search for `Add NPC Definition`, and add it to the page. You should now see the entry on your screen.
 
-<Image img={require("../../assets/entity-adapter/definition_search.png")} alt="Search for NPC Definition" width={400} />
+<EntrySearch entryName='npc_definition'/>
 
 # Customizing the entity
 Now that you have defined the entity, you can customize it to your liking.
@@ -66,7 +67,7 @@ To spawn the entity, we have to add an `Entity Instance` entry.
 Each type of entity has a different `Entity Instance` definition.
 For NPCs, we can use the `NPC Instance` definition.
 
-<Image img={require("../../assets/entity-adapter/search_instance.png")} alt="Instance Search" width={400} />
+<EntrySearch entryName='npc_instance'/>
 
 First, select the NPC definition you want to spawn from the `Definition` dropdown.
 In this case, we will select the `Oliver Definition` we just created.

documentation/src/components/EntrySearch/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { blueprints } from '@site/src/libs/data';
+import Admonition from '@theme/Admonition';
+
+interface EntryProps {
+    entryName: string;
+}
+const EntrySearch: React.FC<EntryProps> = ({ entryName }) => {
+    const parsedEntry = blueprints.get(entryName);
+
+    if (!parsedEntry) {
+        return <div className="bg-red-500 text-white p-4 rounded">Invalid entry, please report this in the TypeWriter Discord. {entryName}</div>;;
+    }
+
+    const { name, description, color, icon } = parsedEntry;
+    const finalName = name.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+    return (
+        <div className="w-full h-full flex justify-center items-center select-none pt-5 pb-10">
+            <div className="bg-[#171719] p-3 rounded-[12px] select-none">
+                <div className="flex items-center mb-4 space-x-2 w-[280px]">
+                    <Icon icon="mdi:filter" className="text-white text-2xl" />
+                    <div className="flex space-x-2">
+                        <button className="flex items-center bg-[#448aff] rounded-full text-white px-3 py-1 text-sm cursor-pointer hover:bg-[#3d7ce5]" disabled>
+                            <Icon icon="ic:outline-search" className="text-white text-lg" />
+                            <span className="ml-1">New Entries</span>
+                        </button>
+                        <button className="flex items-center bg-[#448aff] rounded-full text-white px-3 py-1 text-sm cursor-pointer hover:bg-[#3d7ce5]" disabled>
+                            <Icon icon="ic:outline-search" className="text-white text-lg" />
+                            <span className="ml-1">Add Page</span>
+                        </button>
+                    </div>
+                </div>
+                <div className="flex items-center bg-[#141218] rounded-lg px-3 py-2 mb-4 w-96 select-none">
+                    <Icon icon="ic:outline-search" className="text-[#e6e0e9] text-2xl" />
+                    <input
+                        type="text"
+                        value={`Add ${finalName}`}
+                        className="bg-transparent border-none outline-none flex-grow ml-2 text-[#e6e0e9] text-lg pointer-events-auto cursor-text"
+                        readOnly
+                    />
+                    <Icon icon="mingcute:close-fill" className="text-[#e6e0e9] text-[30px] cursor-pointer hover:bg-[#222026] rounded-full p-1" />
+                </div>
+                <div className="flex items-center bg-[#141218] rounded-lg cursor-pointer text-white w-96 mt-2 text-lg hover:bg-[#121016]">
+                    <div className="flex items-center justify-center mr-2 p-4 rounded" style={{ backgroundColor: color }}>
+                        <Icon icon={icon} className="text-[#141218] text-2xl" />
+                    </div>
+                    <div className="flex-grow">
+                        <div className="font-medium text-[16px] text-[#e6e0e9] select-none">Add {finalName}</div>
+                        <div className="text-[#a09fa6] text-sm select-none">{description}</div>
+                    </div>
+                    <span className="text-white text-2xl pr-2.5 select-none">+</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EntrySearch;