@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
904 lines • 32.4 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ThumbnailPage.tsx";
import { Thumbnail, ImageIcon, Link } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ThumbnailPage() {
return _jsxDEV(Library.Page, {
title: "Thumbnail",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " renders media thumbnails, handling aspect ratio, loading states, and placeholder content. It is a composite component that uses", ' ', _jsxDEV(Library.Link, {
href: "/data-aspectratio",
children: _jsxDEV("code", {
children: "AspectRatio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic Thumbnail",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(Thumbnail, {
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Thumbnails",
children: [_jsxDEV(Library.SectionL3, {
title: "Loading and placeholder content",
children: [_jsxDEV(Library.Demo, {
withSource: true,
title: "Loading state",
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(Thumbnail, {
loading: true,
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Placeholder shown when empty",
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(Thumbnail, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Height and width constraints",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 15
}, this), " will constrain content to within the height and width constraints of the containing element. If the parent element has a set height and there is extra space, Thumbnail content will be centered vertically."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Extra available vertical space",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px] h-[300px]",
children: _jsxDEV(Thumbnail, {
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Thumbnail content respects parent constraints, even if there is not enough room to show the full content. In this example,", _jsxDEV("code", {
children: "object-position: top"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 15
}, this), " has been set on the contained image to optimize the cropping."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Content taller than vertical space",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] h-[150px]",
children: _jsxDEV(Thumbnail, {
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
className: "object-top",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "borderless",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Render the ", _jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 28
}, this), " with no visual border. Relative border size can be controlled with the", ' ', _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 17
}, this), " prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "borderless Thumbnails",
withSource: true,
children: _jsxDEV("div", {
className: "space-y-4",
children: [_jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
borderless: true,
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
borderless: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "loading",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Display a loading indicator."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "objectFit",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Control the way the content is resized and fitted (", _jsxDEV(Link, {
underline: "always",
href: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
children: "object-fit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 17
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'cover'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "placeholder",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Custom placeholder content to use when the", ' ', _jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 17
}, this), " is empty."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "preact.ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Custom placeholder",
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(Thumbnail, {
placeholder: _jsxDEV(ImageIcon, {
className: "text-grey-5 w-1em h-1em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "ratio",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set the aspect ratio for the content."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: [_jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 17
}, this), " Any numeric string that can be used in a CSS", ' ', _jsxDEV("code", {
children: "calc()"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 17
}, this), " expression"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'16/9'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "ratio: '4/3'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(Thumbnail, {
ratio: "4/3",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the relative proportions of the ", _jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 53
}, this), ", its border, loading spinner and placeholder content. If you need more styling control, use", ' ', _jsxDEV(Library.Link, {
href: "/data-aspectratio",
children: "AspectRatio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 17
}, this), ' ', "directly."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'sm' | 'md' | 'lg'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'md'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "size: 'sm'",
withSource: true,
children: _jsxDEV("div", {
className: "flex gap-x-4",
children: [_jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "sm",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "sm",
loading: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "size: 'md'",
withSource: true,
children: _jsxDEV("div", {
className: "flex gap-x-4",
children: [_jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "md",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "md",
loading: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "size: 'lg'",
withSource: true,
children: _jsxDEV("div", {
className: "flex gap-x-4",
children: [_jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "lg",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "lg",
loading: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 268,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-[200px]",
children: _jsxDEV(Thumbnail, {
size: "lg"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Thubmnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'loading' | 'placeholder'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ThumbnailPage.js.map