add SfThumbnail

Author: gioboa

packages/storefront-ui/src/components/SfThumbnail/SfThumbnail.tsx

@@ -0,0 +1,27 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { SfThumbnailSize } from '../../shared/SfThumbnail';
+import { SfThumbnailProps } from './types';
+
+const sizeClasses = {
+  [SfThumbnailSize.sm]: 'w-5 h-5',
+  [SfThumbnailSize.base]: 'w-6 h-6',
+  [SfThumbnailSize.lg]: 'w-10 h-10',
+  [SfThumbnailSize.xl]: 'w-14 h-14',
+};
+export const SfThumbnail = component$<SfThumbnailProps>(
+  ({ size = SfThumbnailSize.base, class: _class, ...attributes }) => {
+    return (
+      <div
+        class={[
+          'rounded-full overflow-hidden bg-clip-content p-0.5',
+          sizeClasses[size],
+          _class,
+        ]}
+        data-testid="thumbnail"
+        {...attributes}
+      >
+        <Slot />
+      </div>
+    );
+  }
+);

packages/storefront-ui/src/components/SfThumbnail/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export {  SfThumbnail } from './SfThumbnail';

packages/storefront-ui/src/components/SfThumbnail/types.ts

@@ -0,0 +1,6 @@
+import { SfThumbnailSize } from '../../shared/SfThumbnail';
+
+export type SfThumbnailProps = {
+  class: string;
+  size?: `${SfThumbnailSize}`;
+};