Create a separate component for Devmode border and hint

[AnweshGangula]

either use conditional parent - https://stackoverflow.com/a/65058717/6908282 or absolute position DIV

currently tried this component below

<script>
    import { devModeSuffix } from "~/utils/constants";

    let devMode = import.meta.env.VITE_DEV_MODE == "true";

    // const devAttribute = () => {
    //     // ref: https://stacktuts.com/how-to-have-a-conditional-attribute-in-svelte-3
    //     return devMode ? { dataDevMode: devModeSuffix } : {};
    // };

</script>

{#if devMode}
<!-- conditonal parent div: https://stackoverflow.com/a/65058717/6908282 -->
  <div id="devModeRoot" data-devMode = {devMode ? devModeSuffix : null}>
    <slot />
  </div>
{:else}
  <slot />
{/if}

<style>
    #devModeRoot {
        border: 5px solid firebrick;
        /* position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 100; */
    }
    #devModeRoot::before {
        content: attr(data-devMode); /* https://stackoverflow.com/a/59028650/6908282 */
        color: white;
        white-space: nowrap;
        position: absolute;
        padding: 3px;
        z-index: 1000;
        background: firebrick;
        left: 0px;
        /* top: -5px; */
        /* border-radius: 5px; */
    }
</style>