67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { createSignal, For, Show } from "solid-js";
|
|
import { Dynamic } from "solid-js/web";
|
|
import { FooComponent } from "./Foo";
|
|
import { NewFooComponent } from "./NewFoo";
|
|
const RedDiv = () => <div style="color: red">Red</div>;
|
|
const GreenDiv = () => <div style="color: green">Green</div>;
|
|
const BlueDiv = () => <div style="color: blue">Blue</div>;
|
|
const YellowDiv = () => <div style="color: yellow">Yellow</div>;
|
|
const BlackDiv = () => <div style="color: black">Black</div>;
|
|
|
|
const options = {
|
|
red: RedDiv,
|
|
green: GreenDiv,
|
|
blue: BlueDiv,
|
|
yellow: YellowDiv,
|
|
black: BlackDiv,
|
|
};
|
|
|
|
|
|
function MyComponent() {
|
|
const [count, setCount] = createSignal(0);
|
|
|
|
console.log(count());
|
|
|
|
return (
|
|
<div>
|
|
<Show
|
|
when={count() > 5}
|
|
fallback={
|
|
<>
|
|
<p>Count: {count()}</p>
|
|
<button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
|
|
</>
|
|
}
|
|
>
|
|
<div>Count Limit reached</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
const [selected, setSelected] = createSignal("red");
|
|
|
|
return (
|
|
<>
|
|
<MyComponent />
|
|
<select
|
|
value={selected()}
|
|
onInput={(e) => setSelected(e.currentTarget.value)}
|
|
>
|
|
<For each={Object.keys(options)}>
|
|
{(color) => <option value={color}>{color}</option>}
|
|
</For>
|
|
</select>
|
|
<Dynamic component={options[selected()]} />
|
|
<FooComponent text="props test"/>
|
|
<div class="m-12 items-center justify-center^ flex h-screen shadow-lg bg-twitter-blue text-center">
|
|
red background
|
|
</div>
|
|
<NewFooComponent/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|