+
+
+
+ )
+}
+
+export default App
diff --git a/example/src/Gallery.tsx b/example/src/Gallery.tsx
new file mode 100644
index 0000000..8c58c52
--- /dev/null
+++ b/example/src/Gallery.tsx
@@ -0,0 +1,43 @@
+import {TypeBlurhashImageWithoutUnresolvableLinksResponse} from "./types.ts";
+import {Asset} from "contentful";
+import {Blurhash} from "react-blurhash";
+
+const BASE_SIZE = 350
+
+type Props = {
+ images: TypeBlurhashImageWithoutUnresolvableLinksResponse[]
+};
+
+export function Gallery({images}: Props) {
+
+ return (
+ Blurhash Image
+
+ {images.flatMap((entry, index) => {
+ const aRatio = imageAspectRatio(entry.fields.image!)
+ const size = {width: BASE_SIZE, height: Math.round(BASE_SIZE * aRatio)}
+ const url = `${entry.fields.image?.fields.file?.url}?w=${size.width}&h=${size.height}&fm=jpg`
+ return [
+ 
+ ]
+ })}
+
+ );
+}
+
+function imageAspectRatio(asset: Asset<'WITHOUT_UNRESOLVABLE_LINKS', ''>) {
+ if (asset.fields.file?.details?.image) {
+ return asset.fields.file.details.image.height / asset.fields.file.details.image.width
+ }
+ return 1
+}
\ No newline at end of file
diff --git a/example/src/client.ts b/example/src/client.ts
new file mode 100644
index 0000000..21fcff5
--- /dev/null
+++ b/example/src/client.ts
@@ -0,0 +1,13 @@
+import {createClient} from "contentful";
+import {TypeBlurhashImageWithoutUnresolvableLinksResponse, TypeGallerySkeleton} from "./types.ts";
+
+const client = createClient({
+ space: "02antqq6yz4y",
+ accessToken: "tCAITMYW1nv43wNN19yEa6tLAYxtJCRlN3TjzXhtVLM",
+})
+
+export async function getBlurHashImages() {
+ const gallery = await client.withoutUnresolvableLinks.getEntry
+ {blurhashCanvas}
+
+
+ {
+ blurhashIsLoading && !blurhash
+ ?
+
+
+ )
+};
\ No newline at end of file
diff --git a/src/hooks/useContentTypeLink.tsx b/src/hooks/useContentTypeLink.tsx
new file mode 100644
index 0000000..3ece3aa
--- /dev/null
+++ b/src/hooks/useContentTypeLink.tsx
@@ -0,0 +1,7 @@
+import {useSDK} from "@contentful/react-apps-toolkit";
+import {FieldAppSDK} from "@contentful/app-sdk";
+
+export function useContentTypeLink() {
+ const sdk = useSDKimage to be
+ present on the content type.
+ Ideally, the field is restricted to only allow image assets.
+