react-justified-layout-ts 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/TSJustifiedLayout.js +3 -1
  2. package/dist/stories/JustifiedLayout.stories.js +127 -98
  3. package/package.json +1 -1
  4. package/src/components/TSJustifiedLayout.tsx +7 -7
  5. package/src/components/layout.css +1 -1
  6. package/src/stories/JustifiedLayout.stories.tsx +129 -100
package/dist/components/TSJustifiedLayout.js CHANGED
@@ -58,7 +58,9 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
58
58
  rowBuffer = [];
59
59
  }
60
60
  }
61
- layoutItems.forEach((value) => addItem(value));
61
+ layoutItems.forEach((value) => {
62
+ addItem(value);
63
+ });
62
64
  // Handle leftover content
63
65
  if (showWidows && rowBuffer.length !== 0) {
64
66
  rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
package/dist/stories/JustifiedLayout.stories.js CHANGED
@@ -13,33 +13,41 @@ const meta = {
13
13
  exports.default = meta;
14
14
  const displayedImages = [
15
15
  {
16
- "title": "Castor Evolved",
17
- "artist": "@TOOMIRO",
16
+ "title": "Outfit Sheet",
17
+ "artist": "@godbirdart",
18
18
  "tags": [
19
- "Castor",
19
+ "Vernal",
20
+ "Serotinal Circuitboard",
21
+ "Estival Checker",
22
+ "Autumnal Wavesniper",
23
+ "Hibernal Assassin",
24
+ "Rastaban Form",
25
+ "Knives",
26
+ "Techwear",
27
+ "Hoodie",
28
+ "Bodysuit",
20
29
  "Featured"
21
30
  ],
22
- "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
23
- "published": "2024-01-22",
24
- "aspectRatio": 1.48,
25
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
26
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
27
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
31
+ "href": "https://x.com/FaintAlcor/status/1785179761309839456",
32
+ "published": "2024-04-30",
33
+ "aspectRatio": 2.35,
34
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/outfit_sheet.webp",
35
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/outfit_sheet.webp",
36
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/outfit_sheet.PNG"
28
37
  },
29
38
  {
30
- "title": "Techwear Ninja v2",
31
- "artist": "@edadrz",
39
+ "title": "Quick-Draw Stance",
40
+ "artist": "@RSN_07",
32
41
  "tags": [
33
- "Rastaban Form",
34
- "Techwear",
35
- "Hibernal Assassin"
42
+ "Aquarius Form",
43
+ "Featured"
36
44
  ],
37
- "href": "https://x.com/edadrz2/status/1750189393833517203?s=20",
38
- "published": "2024-01-24",
39
- "aspectRatio": 0.7857142857142857,
40
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/techwear_ninja_v2.webp",
41
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/techwear_ninja_v2.png",
42
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/techwear_ninja_v2.png"
45
+ "href": "https://x.com/RSN_07/status/1775664237119217719?s=20",
46
+ "published": "2024-04-03",
47
+ "aspectRatio": 0.6328963051251489,
48
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/quick_draw_stance.webp",
49
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/quick_draw_stance.webp",
50
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/quick_draw_stance.PNG"
43
51
  },
44
52
  {
45
53
  "title": "Glimmer on the Shore",
@@ -56,118 +64,139 @@ const displayedImages = [
56
64
  "src": "https://alcorsiteartbucket.s3.amazonaws.com/glimmer_on_the_shore.png"
57
65
  },
58
66
  {
59
- "title": "Farmer Sketch",
60
- "artist": "@KuroPenguinEx",
67
+ "title": "Castor Evolved",
68
+ "artist": "@TOOMIRO",
61
69
  "tags": [
62
- "Aquarius Form"
70
+ "Castor",
71
+ "Featured"
63
72
  ],
64
- "href": "https://x.com/FaintAlcor/status/1751444972904063414?s=20",
65
- "published": "2024-01-27",
66
- "aspectRatio": 0.7069555302166477,
67
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch.webp",
68
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch.webp%7D",
69
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch.png"
73
+ "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
74
+ "published": "2024-01-22",
75
+ "aspectRatio": 1.48,
76
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
77
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
78
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
70
79
  },
71
80
  {
72
- "parent": "Farmer Sketch",
81
+ "title": "Happy 24th Birthday!",
82
+ "artist": "@DrawingDDoom",
73
83
  "tags": [
74
- "Aquarius Form"
84
+ "Aldhibah Form",
85
+ "Techwear",
86
+ "Castor",
87
+ "Featured"
75
88
  ],
76
- "href": "",
77
- "aspectRatio": 0.7069555302166477,
78
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch/0.webp",
79
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch/0.webp",
80
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch/0.png"
89
+ "href": "https://x.com/DrawingDDoom/status/1715601315492245545?s=20",
90
+ "published": "2023-10-21",
91
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/happy_24_th_birthday.webp",
92
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/happy_24_th_birthday.png",
93
+ "aspectRatio": 0.6097560975609756,
94
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/happy_24_th_birthday.webp"
81
95
  },
82
96
  {
83
- "title": "My Room",
84
- "artist": "@ito_44_3",
97
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/combat_ready_duo.png",
98
+ "title": "Combat Ready Duo",
99
+ "artist": "@illusummer",
85
100
  "tags": [
86
- "Thuban Form"
101
+ "Rastaban Form",
102
+ "Techwear",
103
+ "Featured"
87
104
  ],
88
- "href": "https://x.com/ito_44_3/status/1759850276633419776?s=20",
89
- "published": "2024-02-02",
90
- "aspectRatio": 1.4166666666666667,
91
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/my_room.webp",
92
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/my_room.webp",
93
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/my_room.png"
105
+ "href": "https://skeb.jp/@arcielsummer/works/33",
106
+ "published": "2023-05-05",
107
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/combat_ready_duo.webp",
108
+ "aspectRatio": 1.7777777777777777,
109
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
94
110
  },
95
111
  {
96
- "title": "Triangulum Combat Suit",
97
- "artist": "@neumokun",
112
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
113
+ "title": "Special Archery Training!",
114
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
98
115
  "tags": [
99
- "Triangulum Form"
116
+ "Superhero",
117
+ "Indra Suit",
118
+ "Bow",
119
+ "Bodysuit",
120
+ "Thuban Form",
121
+ "Featured"
100
122
  ],
101
- "href": "https://bsky.app/profile/neumokun.bsky.social/post/3klncrgkl5z24",
102
- "published": "2024-02-17",
103
- "aspectRatio": 0.7501875468867217,
104
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/triangulum_combat_suit.webp",
105
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/triangulum_combat_suit.webp",
106
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/triangulum_combat_suit.png"
123
+ "artist": "@Yamainu_ken",
124
+ "published": "2023-01-22",
125
+ "aspectRatio": 1.5442260442260443
107
126
  },
108
127
  {
128
+ "title": "Evening Train",
129
+ "artist": "@greyy_arts",
109
130
  "tags": [
110
- "Eclipse Deity"
131
+ "Estival Checker",
132
+ "Rastaban Form",
133
+ "Hoodie",
134
+ "Featured"
111
135
  ],
112
- "href": "",
113
- "aspectRatio": 0.8243310619910255,
114
- "parent": "Eclipse Deity v3",
115
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/eclipse_deity_v3/0.webp",
116
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/eclipse_deity_v3/0.webp",
117
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/eclipse_deity_v3/0.png"
136
+ "href": "https://twitter.com/greyy_arts/status/1613748293531758593",
137
+ "published": "2023-01-12",
138
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/evening_train.webp",
139
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/evening_train.png",
140
+ "aspectRatio": 0.8203125,
141
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/evening_train.webp"
118
142
  },
119
143
  {
120
- "title": "Biogenesis Suit Design",
121
- "artist": "@EmberWickArt",
144
+ "src": "https://pbs.twimg.com/media/Fj2qZYRVEAAVyRC?format=jpg&name=large",
145
+ "title": "AICore Relaxing",
146
+ "href": "https://twitter.com/KuroPenguinEx/status/1602624683211227136/photo/1",
147
+ "artist": "@KuroPenguinEx",
122
148
  "tags": [
123
- "Superhero",
124
- "Bodysuit"
149
+ "AICore Form",
150
+ "Thuban Form",
151
+ "Featured"
125
152
  ],
126
- "href": "https://x.com/EmberWickArt/status/1795127025331577256",
127
- "published": "2024-05-27",
128
- "aspectRatio": 1.0115606936416186,
129
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/biogenesis_suit_design.webp",
130
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/biogenesis_suit_design.webp",
131
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/biogenesis_suit_design.png"
153
+ "published": "2022-12-13",
154
+ "aspectRatio": 1.3333333333333333
132
155
  },
133
156
  {
134
- "title": "Alan and Alcor",
135
- "artist": "@kongzorim",
157
+ "title": "Sci-fi Mode: ON",
158
+ "href": "https://twitter.com/AxyUsagi/status/1543041029674344448?s=20&t=tlXwc5aegdXuQeLhgdUw-Q",
159
+ "artist": "@AxyUsagi",
160
+ "src": "https://pbs.twimg.com/media/FWn7dJ9XkAIHM5j?format=jpg&name=medium",
136
161
  "tags": [
137
- "Aldhibah Form",
138
- "Rastaban Form",
139
- "Standard Outfit"
162
+ "Thuban Form",
163
+ "Knives",
164
+ "Hoodie",
165
+ "Techwear",
166
+ "Bodysuit",
167
+ "Featured"
140
168
  ],
141
- "href": "https://x.com/kongzorim/status/1795818089080385818",
142
- "published": "2024-05-29",
143
- "aspectRatio": 0.7056150600454398,
144
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/alan_and_alcor.webp",
145
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alan_and_alcor.webp",
146
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/alan_and_alcor.png"
169
+ "published": "2022-07-01",
170
+ "aspectRatio": 0.9166666666666666
147
171
  },
148
172
  {
173
+ "title": "Lance Hero",
174
+ "href": "https://twitter.com/eb_kemo/status/1521991097098305536?s=20&t=8fG0sc10hW-oJEyn8HzT3w",
175
+ "src": "https://pbs.twimg.com/media/FR8y1bnakAA0Pol?format=jpg&name=large",
176
+ "artist": "@eb_erh",
149
177
  "tags": [
150
- ""
178
+ "Rastaban Form",
179
+ "Gungrir Suit",
180
+ "Lances",
181
+ "Superhero",
182
+ "Featured"
151
183
  ],
152
- "href": "",
153
- "aspectRatio": 1.7777777777777777,
154
- "parent": "Proud Summer Beach YCH",
155
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/proud_summer_beach_ych/0.webp",
156
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/proud_summer_beach_ych/0.webp",
157
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/proud_summer_beach_ych/0.png"
184
+ "published": "2022-05-04",
185
+ "aspectRatio": 0.85107421875
158
186
  },
159
187
  {
160
- "title": "Soma's Spring Outfit",
161
- "artist": "@kaerukbin",
188
+ "title": "The Beginning",
189
+ "href": "https://twitter.com/Mike202112/status/1406146656660197379?s=20",
190
+ "src": "https://pbs.twimg.com/media/E4Oi2GKVcAIQKzo?format=png&name=900x900",
191
+ "artist": "@Mike202112",
162
192
  "tags": [
163
- "Soma"
193
+ "Rastaban Form",
194
+ "Knives",
195
+ "Standard Outfit",
196
+ "Featured"
164
197
  ],
165
- "href": "https://skeb.jp/@kaerukbin/works/4",
166
- "published": "2024-05-31",
167
- "aspectRatio": 0.763189448441247,
168
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/soma_s_spring_outfit.webp",
169
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/soma_s_spring_outfit.webp",
170
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/soma_s_spring_outfit.png"
198
+ "published": "2021-06-19",
199
+ "aspectRatio": 0.7084745762711865
171
200
  }
172
201
  ];
173
202
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-justified-layout-ts",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/TSJustifiedLayout.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, {cloneElement} from "react";
1
+ import React from "react";
2
2
  import './layout.css'
3
3
 
4
4
  type ElementDimensions = number;
@@ -10,7 +10,7 @@ export interface TSJustifiedLayoutProps {
10
10
  targetRowHeight?: number;
11
11
  targetRowHeightTolerance?: number;
12
12
  width: number;
13
- children: React.JSX.Element[];
13
+ children: React.JSX.Element[];
14
14
  showWidows?: boolean;
15
15
  containerStyle?: React.CSSProperties;
16
16
  // TODO Implement these
@@ -83,7 +83,9 @@ function TSJustifiedLayout({
83
83
  }
84
84
 
85
85
 
86
- layoutItems.forEach((value) => addItem(value))
86
+ layoutItems.forEach((value) => {
87
+ addItem(value);
88
+ })
87
89
 
88
90
  // Handle leftover content
89
91
  if (showWidows && rowBuffer.length !== 0) {
@@ -98,9 +100,8 @@ function TSJustifiedLayout({
98
100
  function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
99
101
  childNodeCounter++;
100
102
  return <div style={{
101
- maxHeight: '100%',
102
103
  aspectRatio: aspectRatio,
103
- ...(isLastRow ? {} : {flex: aspectRatio}),
104
+ flex: aspectRatio,
104
105
  ...containerStyle
105
106
  }}>
106
107
  {children[childNodeCounter]}
@@ -115,8 +116,7 @@ function TSJustifiedLayout({
115
116
  display: "flex",
116
117
  flexDirection: "row",
117
118
  gap: itemSpacing,
118
- marginBottom: rowSpacing,
119
- aspectRatio: width / value.height
119
+ marginBottom: rowSpacing
120
120
  }
121
121
  }>
122
122
  {value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}
package/src/components/layout.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .justified-row img {
2
- height: 100%
2
+ width: 100%
3
3
  }
package/src/stories/JustifiedLayout.stories.tsx CHANGED
@@ -12,33 +12,41 @@ type Story = StoryObj<typeof meta>;
12
12
 
13
13
  const displayedImages = [
14
14
  {
15
- "title": "Castor Evolved",
16
- "artist": "@TOOMIRO",
15
+ "title": "Outfit Sheet",
16
+ "artist": "@godbirdart",
17
17
  "tags": [
18
- "Castor",
18
+ "Vernal",
19
+ "Serotinal Circuitboard",
20
+ "Estival Checker",
21
+ "Autumnal Wavesniper",
22
+ "Hibernal Assassin",
23
+ "Rastaban Form",
24
+ "Knives",
25
+ "Techwear",
26
+ "Hoodie",
27
+ "Bodysuit",
19
28
  "Featured"
20
29
  ],
21
- "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
22
- "published": "2024-01-22",
23
- "aspectRatio": 1.48,
24
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
25
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
26
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
30
+ "href": "https://x.com/FaintAlcor/status/1785179761309839456",
31
+ "published": "2024-04-30",
32
+ "aspectRatio": 2.35,
33
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/outfit_sheet.webp",
34
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/outfit_sheet.webp",
35
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/outfit_sheet.PNG"
27
36
  },
28
37
  {
29
- "title": "Techwear Ninja v2",
30
- "artist": "@edadrz",
38
+ "title": "Quick-Draw Stance",
39
+ "artist": "@RSN_07",
31
40
  "tags": [
32
- "Rastaban Form",
33
- "Techwear",
34
- "Hibernal Assassin"
41
+ "Aquarius Form",
42
+ "Featured"
35
43
  ],
36
- "href": "https://x.com/edadrz2/status/1750189393833517203?s=20",
37
- "published": "2024-01-24",
38
- "aspectRatio": 0.7857142857142857,
39
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/techwear_ninja_v2.webp",
40
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/techwear_ninja_v2.png",
41
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/techwear_ninja_v2.png"
44
+ "href": "https://x.com/RSN_07/status/1775664237119217719?s=20",
45
+ "published": "2024-04-03",
46
+ "aspectRatio": 0.6328963051251489,
47
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/quick_draw_stance.webp",
48
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/quick_draw_stance.webp",
49
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/quick_draw_stance.PNG"
42
50
  },
43
51
  {
44
52
  "title": "Glimmer on the Shore",
@@ -55,118 +63,139 @@ const displayedImages = [
55
63
  "src": "https://alcorsiteartbucket.s3.amazonaws.com/glimmer_on_the_shore.png"
56
64
  },
57
65
  {
58
- "title": "Farmer Sketch",
59
- "artist": "@KuroPenguinEx",
66
+ "title": "Castor Evolved",
67
+ "artist": "@TOOMIRO",
60
68
  "tags": [
61
- "Aquarius Form"
69
+ "Castor",
70
+ "Featured"
62
71
  ],
63
- "href": "https://x.com/FaintAlcor/status/1751444972904063414?s=20",
64
- "published": "2024-01-27",
65
- "aspectRatio": 0.7069555302166477,
66
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch.webp",
67
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch.webp%7D",
68
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch.png"
72
+ "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
73
+ "published": "2024-01-22",
74
+ "aspectRatio": 1.48,
75
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
76
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
77
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
69
78
  },
70
79
  {
71
- "parent": "Farmer Sketch",
80
+ "title": "Happy 24th Birthday!",
81
+ "artist": "@DrawingDDoom",
72
82
  "tags": [
73
- "Aquarius Form"
83
+ "Aldhibah Form",
84
+ "Techwear",
85
+ "Castor",
86
+ "Featured"
74
87
  ],
75
- "href": "",
76
- "aspectRatio": 0.7069555302166477,
77
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch/0.webp",
78
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch/0.webp",
79
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch/0.png"
88
+ "href": "https://x.com/DrawingDDoom/status/1715601315492245545?s=20",
89
+ "published": "2023-10-21",
90
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/happy_24_th_birthday.webp",
91
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/happy_24_th_birthday.png",
92
+ "aspectRatio": 0.6097560975609756,
93
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/happy_24_th_birthday.webp"
80
94
  },
81
95
  {
82
- "title": "My Room",
83
- "artist": "@ito_44_3",
96
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/combat_ready_duo.png",
97
+ "title": "Combat Ready Duo",
98
+ "artist": "@illusummer",
84
99
  "tags": [
85
- "Thuban Form"
100
+ "Rastaban Form",
101
+ "Techwear",
102
+ "Featured"
86
103
  ],
87
- "href": "https://x.com/ito_44_3/status/1759850276633419776?s=20",
88
- "published": "2024-02-02",
89
- "aspectRatio": 1.4166666666666667,
90
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/my_room.webp",
91
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/my_room.webp",
92
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/my_room.png"
104
+ "href": "https://skeb.jp/@arcielsummer/works/33",
105
+ "published": "2023-05-05",
106
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/combat_ready_duo.webp",
107
+ "aspectRatio": 1.7777777777777777,
108
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
93
109
  },
94
110
  {
95
- "title": "Triangulum Combat Suit",
96
- "artist": "@neumokun",
111
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
112
+ "title": "Special Archery Training!",
113
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
97
114
  "tags": [
98
- "Triangulum Form"
115
+ "Superhero",
116
+ "Indra Suit",
117
+ "Bow",
118
+ "Bodysuit",
119
+ "Thuban Form",
120
+ "Featured"
99
121
  ],
100
- "href": "https://bsky.app/profile/neumokun.bsky.social/post/3klncrgkl5z24",
101
- "published": "2024-02-17",
102
- "aspectRatio": 0.7501875468867217,
103
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/triangulum_combat_suit.webp",
104
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/triangulum_combat_suit.webp",
105
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/triangulum_combat_suit.png"
122
+ "artist": "@Yamainu_ken",
123
+ "published": "2023-01-22",
124
+ "aspectRatio": 1.5442260442260443
106
125
  },
107
126
  {
127
+ "title": "Evening Train",
128
+ "artist": "@greyy_arts",
108
129
  "tags": [
109
- "Eclipse Deity"
130
+ "Estival Checker",
131
+ "Rastaban Form",
132
+ "Hoodie",
133
+ "Featured"
110
134
  ],
111
- "href": "",
112
- "aspectRatio": 0.8243310619910255,
113
- "parent": "Eclipse Deity v3",
114
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/eclipse_deity_v3/0.webp",
115
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/eclipse_deity_v3/0.webp",
116
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/eclipse_deity_v3/0.png"
135
+ "href": "https://twitter.com/greyy_arts/status/1613748293531758593",
136
+ "published": "2023-01-12",
137
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/evening_train.webp",
138
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/evening_train.png",
139
+ "aspectRatio": 0.8203125,
140
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/evening_train.webp"
117
141
  },
118
142
  {
119
- "title": "Biogenesis Suit Design",
120
- "artist": "@EmberWickArt",
143
+ "src": "https://pbs.twimg.com/media/Fj2qZYRVEAAVyRC?format=jpg&name=large",
144
+ "title": "AICore Relaxing",
145
+ "href": "https://twitter.com/KuroPenguinEx/status/1602624683211227136/photo/1",
146
+ "artist": "@KuroPenguinEx",
121
147
  "tags": [
122
- "Superhero",
123
- "Bodysuit"
148
+ "AICore Form",
149
+ "Thuban Form",
150
+ "Featured"
124
151
  ],
125
- "href": "https://x.com/EmberWickArt/status/1795127025331577256",
126
- "published": "2024-05-27",
127
- "aspectRatio": 1.0115606936416186,
128
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/biogenesis_suit_design.webp",
129
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/biogenesis_suit_design.webp",
130
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/biogenesis_suit_design.png"
152
+ "published": "2022-12-13",
153
+ "aspectRatio": 1.3333333333333333
131
154
  },
132
155
  {
133
- "title": "Alan and Alcor",
134
- "artist": "@kongzorim",
156
+ "title": "Sci-fi Mode: ON",
157
+ "href": "https://twitter.com/AxyUsagi/status/1543041029674344448?s=20&t=tlXwc5aegdXuQeLhgdUw-Q",
158
+ "artist": "@AxyUsagi",
159
+ "src": "https://pbs.twimg.com/media/FWn7dJ9XkAIHM5j?format=jpg&name=medium",
135
160
  "tags": [
136
- "Aldhibah Form",
137
- "Rastaban Form",
138
- "Standard Outfit"
161
+ "Thuban Form",
162
+ "Knives",
163
+ "Hoodie",
164
+ "Techwear",
165
+ "Bodysuit",
166
+ "Featured"
139
167
  ],
140
- "href": "https://x.com/kongzorim/status/1795818089080385818",
141
- "published": "2024-05-29",
142
- "aspectRatio": 0.7056150600454398,
143
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/alan_and_alcor.webp",
144
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alan_and_alcor.webp",
145
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/alan_and_alcor.png"
168
+ "published": "2022-07-01",
169
+ "aspectRatio": 0.9166666666666666
146
170
  },
147
171
  {
172
+ "title": "Lance Hero",
173
+ "href": "https://twitter.com/eb_kemo/status/1521991097098305536?s=20&t=8fG0sc10hW-oJEyn8HzT3w",
174
+ "src": "https://pbs.twimg.com/media/FR8y1bnakAA0Pol?format=jpg&name=large",
175
+ "artist": "@eb_erh",
148
176
  "tags": [
149
- ""
177
+ "Rastaban Form",
178
+ "Gungrir Suit",
179
+ "Lances",
180
+ "Superhero",
181
+ "Featured"
150
182
  ],
151
- "href": "",
152
- "aspectRatio": 1.7777777777777777,
153
- "parent": "Proud Summer Beach YCH",
154
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/proud_summer_beach_ych/0.webp",
155
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/proud_summer_beach_ych/0.webp",
156
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/proud_summer_beach_ych/0.png"
183
+ "published": "2022-05-04",
184
+ "aspectRatio": 0.85107421875
157
185
  },
158
186
  {
159
- "title": "Soma's Spring Outfit",
160
- "artist": "@kaerukbin",
187
+ "title": "The Beginning",
188
+ "href": "https://twitter.com/Mike202112/status/1406146656660197379?s=20",
189
+ "src": "https://pbs.twimg.com/media/E4Oi2GKVcAIQKzo?format=png&name=900x900",
190
+ "artist": "@Mike202112",
161
191
  "tags": [
162
- "Soma"
192
+ "Rastaban Form",
193
+ "Knives",
194
+ "Standard Outfit",
195
+ "Featured"
163
196
  ],
164
- "href": "https://skeb.jp/@kaerukbin/works/4",
165
- "published": "2024-05-31",
166
- "aspectRatio": 0.763189448441247,
167
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/soma_s_spring_outfit.webp",
168
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/soma_s_spring_outfit.webp",
169
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/soma_s_spring_outfit.png"
197
+ "published": "2021-06-19",
198
+ "aspectRatio": 0.7084745762711865
170
199
  }
171
200
  ]
172
201
 
@@ -174,7 +203,7 @@ const displayedImages = [
174
203
  export const Primary: Story = {
175
204
  name: "Complex Elements",
176
205
  args: {
177
- width: 847,
206
+ width: 491,
178
207
  showWidows: true,
179
208
  targetRowHeight: undefined,
180
209
  rowSpacing: undefined,
@@ -183,7 +212,7 @@ export const Primary: Story = {
183
212
  targetRowHeightTolerance: undefined,
184
213
  children: displayedImages.map(value => <>
185
214
  <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
186
- <img src={value.webp}/>
215
+ <img src={value.webp || value.src}/>
187
216
  </>
188
217
  ),
189
218
  containerStyle: {position: 'relative'}