add Select example

Author: gioboa

apps/qwik-demo-app/src/routes/Select/SelectCustomChevron/index.tsx

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconUnfoldMore, SfSelect } from 'qwik-storefront-ui';
+
+const options = [
+  { label: 'red', value: 'red' },
+  { label: 'blue', value: 'blue' },
+  { label: 'yellow', value: 'yellow' },
+  { label: 'green', value: 'green' },
+  { label: 'gray', value: 'gray' },
+  { label: 'black', value: 'black' },
+  { label: 'brown', value: 'brown' },
+];
+
+export default component$(() => {
+  return (
+    <label>
+      <span class="pb-1 text-sm font-medium text-neutral-900 font-body">
+        Label
+      </span>
+      <SfSelect placeholder="-- Select --" showSlotChevron={true}>
+        <div q:slot="chevron">
+          <SfIconUnfoldMore class="absolute pointer-events-none top-2 right-4 text-neutral-500" />
+        </div>
+        {options.map((option) => (
+          <option value={option.value} key={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </SfSelect>
+    </label>
+  );
+});

apps/qwik-demo-app/src/routes/Select/SelectInvalid/index.tsx

@@ -0,0 +1,29 @@
+import { component$ } from '@builder.io/qwik';
+import { SfSelect } from 'qwik-storefront-ui';
+
+const options = [
+  { label: 'red', value: 'red' },
+  { label: 'blue', value: 'blue' },
+  { label: 'yellow', value: 'yellow' },
+  { label: 'green', value: 'green' },
+  { label: 'gray', value: 'gray' },
+  { label: 'black', value: 'black' },
+  { label: 'brown', value: 'brown' },
+];
+
+export default component$(() => {
+  return (
+    <label>
+      <span class="pb-1 text-sm font-medium text-neutral-900 font-body">
+        Label
+      </span>
+      <SfSelect invalid placeholder="-- Select --">
+        {options.map((option) => (
+          <option value={option.value} key={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </SfSelect>
+    </label>
+  );
+});

apps/qwik-demo-app/src/routes/Select/SelectSizes/index.tsx

@@ -0,0 +1,57 @@
+import { component$ } from '@builder.io/qwik';
+import { SfSelect } from 'qwik-storefront-ui';
+
+const options = [
+  { label: 'red', value: 'red' },
+  { label: 'blue', value: 'blue' },
+  { label: 'yellow', value: 'yellow' },
+  { label: 'green', value: 'green' },
+  { label: 'gray', value: 'gray' },
+  { label: 'black', value: 'black' },
+  { label: 'brown', value: 'brown' },
+];
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col gap-y-6">
+      <label>
+        <span class="pb-1 text-sm font-medium text-neutral-900 font-body">
+          Label
+        </span>
+        <SfSelect placeholder="-- Select --" size="sm">
+          {options.map((option) => (
+            <option value={option.value} key={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </SfSelect>
+      </label>
+
+      <label>
+        <span class="pb-1 text-sm font-medium text-neutral-900 font-body">
+          Label
+        </span>
+        <SfSelect placeholder="-- Select --" size="base">
+          {options.map((option) => (
+            <option value={option.value} key={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </SfSelect>
+      </label>
+
+      <label>
+        <span class="pb-1 text-sm font-medium text-neutral-900 font-body">
+          Label
+        </span>
+        <SfSelect placeholder="-- Select --" size="lg">
+          {options.map((option) => (
+            <option value={option.value} key={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </SfSelect>
+      </label>
+    </div>
+  );
+});