natemoo-re

<!--
// v0 by Vercel.
// https://v0.dev/t/sE11fA14YKy
-->
<div class="bg-white p-4 max-w-[400px]">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold">Items</h2>
    <button
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-[#FF3008] text-white"
    >

natemoo-re

---
interface Props {
  pose?:
    | "default"
    | "happy"
    | "disappointed"
    | "shocked"
    | "love"
    | "grumpy"
    | "sad"

natemoo-re

{
  "$id": "https://tokencss.com/schema.json",
  "$schema": "http://json-schema.org/draft-04/schema#",
  "title": "Token Config",
  "type": "object",
  "properties": {
    "color": {}
  },
  "$defs": {
    "values": {

natemoo-re

---
import Markdown from 'astro/components/Markdown.astro';
import Layout from '../layouts/main.astro';
import ReactComponent from '../components/ReactComponent.jsx';
import PreactComponent from '../components/PreactComponent.tsx';
import VueComponent from '../components/VueComponent.vue';
import SvelteComponent from '../components/SvelteComponent.svelte';

const title = 'Astro Markdown';
const variable = 'content';

natemoo-re

const fetchMachine = createMachine((statechart, { goto, send, store }) => {
    store.retries = 0;
    return statechart`
        main machine fetch {
            initial state idle {
                on:FETCH ${() => goto('loading')}
            }

            state loading {
                @enter ${async () => {

natemoo-re

type RestParam<S extends string> = S extends `...${infer A}` ? A : never;
type StandardParam<S extends string> = S extends `...${infer A}` ? never : S;

type ExtractParams<S extends string> = S extends `[${infer A}]` ? A : never;
type TupleToUnion<T extends any[]> = T[number];
type Split<S extends string> =
    string extends S ? string[] :
    S extends '' ? [] :
    S extends `${infer T}/${infer U}` ? [T, ...Split<U>] :
    [S];

natemoo-re

import React from "react";

export const ReadmeImg = ({ width, height, children }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg"
      width={width} height={height}
      viewBox={`0 0 ${width} ${height}`}
    >
      <foreignObject width={width} height={height}>

natemoo-re

// Adopted from Alpine.js
// https://github.com/alpinejs/alpine/blob/b6e07b2775de444c5f9bdc4d94accb7b720fd6a7/src/utils.js#L59

function saferEval(expression, context, additionalHelperVariables = {}) {
    return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`))(
        context, ...Object.values(additionalHelperVariables)
    )
}

export default function sandboxedEval(expression, context = {}) {

natemoo-re

const { cancel } = actions;

const timerMachine = Machine(
  {
    initial: "idle",
    context: {
      autodismiss: 5000,
      paused: false,
      startedAt: null,
      remaining: 0

natemoo-re

const { cancel } = actions;

const TimerMachine = Machine(
  {
    initial: "idle",
    context: {
      duration: 5000,
      paused: false,
      startedAt: null,
      remaining: 0