OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 58 LINES
 
[ HISTORY ]  [ UP ]
 

---
import "./Callout.scss";

export interface Props {
  type?: "warning" | "caution" | "note";
  title?: string;
  children: any;
}

const { type = "note", title } = Astro.props;

// define colors and icons for different types
const typeConfig = {
  warning: {
    color: "#ea6962",
    background: "#3a2a2a",
    title: title || "Warning",
    icon: "M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.
9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
  },
  caution: {
    color: "#d79921",
    background: "#3a3620",
    title: title || "Caution",
    icon: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a
2 2 0 0 0-3.42 0z M12 9V13 M12 17H12.01",
  },
  note: {
    color: "#458588",
    background: "#2a3a3a",
    title: title || "Note",
    icon: "M13 2L3 14H12L11 22L21 10H12L13 2Z",
  },
};

const config = typeConfig[type];
---

<div class="callout" data-type={type}>
  <div class="callout-header">
    <svg
      class="callout-icon"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d={config.icon}
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"></path>
    </svg>
    <h3 class="callout-title">{config.title}</h3>
  </div>
  <div class="callout-content">
    <slot />
  </div>
</div>


---
import "./Callout.scss";

export interface Props {
  type?: "warning" | "caution" | "note";
  title?: string;
  children: any;
}

const { type = "note", title } = Astro.props
;

// define colors and icons for different typ
es
const typeConfig = {
  warning: {
    color: "#ea6962",
    background: "#3a2a2a",
    title: title || "Warning",
    icon: "M12 9V13M12 17H12.01M21 12C21 16.
9706 16.9706 21 12 21C7.02944 21 3 16.9706 3
 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.
02944 21 12Z",
  },
  caution: {
    color: "#d79921",
    background: "#3a3620",
    title: title || "Caution",
    icon: "M10.29 3.86L1.82 18a2 2 0 0 0 1.7
1 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 
0 0-3.42 0z M12 9V13 M12 17H12.01",
  },
  note: {
    color: "#458588",
    background: "#2a3a3a",
    title: title || "Note",
    icon: "M13 2L3 14H12L11 22L21 10H12L13 2
Z",
  },
};

const config = typeConfig[type];
---

<div class="callout" data-type={type}>
  <div class="callout-header">
    <svg
      class="callout-icon"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d={config.icon}
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"></path>
    </svg>
    <h3 class="callout-title">{config.title}
</h3>
  </div>
  <div class="callout-content">
    <slot />
  </div>
</div>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET