This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pixelperfectionist/admin/bando/demos/IconImage.svelte

57 lines
1.7 KiB

<script>
import IconImage from "$/client/components/IconImage.svelte";
let index = 0;
let grayscale=0;
const icon_patterns = [
{name: "archive", pattern: "dots-sm", hue: "green", background_hue: "orange"},
{name: "dollar-sign", pattern: "grid-sm", hue: "orange", background_hue: "blue"},
{name: "arrow-up-circle", pattern: "vertical-lines-md", hue: "purple", background_hue: "black"},
{name: "camera", pattern: "triangles-lg", hue: "pink", background_hue: "green"},
];
let props = icon_patterns[index];
const change = () => {
index += 1;
props = icon_patterns[index % icon_patterns.length];
}
</script>
<style>
card {
max-width: 600px;
}
</style>
<card>
<top>
<!-- this is how you assign a set of properties to a component using the {...} syntax -->
<IconImage {...props } grayscale={ grayscale } />
</top>
<middle>
<h4>IconImage Component</h4>
<p>The IconImage is kind of a fancy <b>PlaceHolder</b> that embeds an <b>Icon</b> in a pattern field with color. It's good enough to use for quite a while until you can design a better asset. The patterns come from <a href="https://bansal.io/pattern-css" target="_">pattern.css</a>.
</p>
<code>&lt;IconImage name="{ props.name }" pattern="{ props.pattern }" hue="{ props.hue }" background_hue="{ props.background_hue }" grayscale="{ grayscale }" /&gt;</code>
<br>
</middle>
<bottom>
<button-group>
<button on:click={ change }>Change It!</button>
<button on:click={ () => grayscale = grayscale == 0 ? 1 : 0 }>
{#if grayscale}
Color It!
{:else}
Gray It!
{/if}
</button>
</button-group>
</bottom>
</card>