101 |
Test
94 | 95 | 96 | ``` 97 | ```` 98 | 99 | #### Output 100 | 101 | ```html 102 | 103 | 104 | 105 | 106 |Test
110 | 111 | 112 | ``` 113 | 114 | ## List Types 115 | 116 | ### Ordered List 117 | 118 | #### Syntax 119 | 120 | ```markdown 121 | 1. First item 122 | 2. Second item 123 | 3. Third item 124 | ``` 125 | 126 | #### Output 127 | 128 | 1. First item 129 | 2. Second item 130 | 3. Third item 131 | 132 | ### Unordered List 133 | 134 | #### Syntax 135 | 136 | ```markdown 137 | - List item 138 | - Another item 139 | - And another item 140 | ``` 141 | 142 | #### Output 143 | 144 | * List item 145 | * Another item 146 | * And another item 147 | 148 | ### Nested list 149 | 150 | #### Syntax 151 | 152 | ```markdown 153 | - Fruit 154 | - Apple 155 | - Orange 156 | - Banana 157 | - Dairy 158 | - Milk 159 | - Cheese 160 | ``` 161 | 162 | #### Output 163 | 164 | * Fruit 165 | * Apple 166 | * Orange 167 | * Banana 168 | * Dairy 169 | * Milk 170 | * Cheese 171 | -------------------------------------------------------------------------------- /tina/components/IconComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from "react"; 2 | import { wrapFieldsWithMeta } from "tinacms"; 3 | import * as tb from "react-icons/tb"; 4 | import { useVirtualizer } from "@tanstack/react-virtual"; 5 | 6 | const IconComponent = wrapFieldsWithMeta((props) => { 7 | const [searchQuery, setSearchQuery] = useState(""); 8 | const [containerWidth, setContainerWidth] = useState(0); 9 | const iconName = props.input.value as unknown as keyof typeof tb; 10 | 11 | const iconSize = 50; // Size of each icon box 12 | const gapSize = 10; // Gap between items 13 | 14 | const parentRef = useRef