mirror of
https://github.com/project-gauntlet/gauntlet.git
synced 2025-12-23 10:35:53 +00:00
Add 3 more grid examples. Tweak others
This commit is contained in:
Exidex
parent
8fc21934de
commit
6e04702903
10 changed files with 115 additions and 85 deletions
|
|
@ -21,6 +21,24 @@ type = 'view'
|
|||
description = ''
|
||||
# docs-code-segment:end
|
||||
|
||||
# docs-code-segment:start more-columns
|
||||
[[entrypoint]]
|
||||
id = 'more-columns'
|
||||
name = 'Grid More Columns'
|
||||
path = 'src/more-columns.tsx'
|
||||
type = 'view'
|
||||
description = ''
|
||||
# docs-code-segment:end
|
||||
|
||||
# docs-code-segment:start search-bar-set-search-text
|
||||
[[entrypoint]]
|
||||
id = 'search-bar-set-search-text'
|
||||
name = 'Grid Search Bar Set Search Text'
|
||||
path = 'src/search-bar-set-search-text.tsx'
|
||||
type = 'view'
|
||||
description = ''
|
||||
# docs-code-segment:end
|
||||
|
||||
# docs-code-segment:start section
|
||||
[[entrypoint]]
|
||||
id = 'section'
|
||||
|
|
@ -75,5 +93,15 @@ type = 'view'
|
|||
description = ''
|
||||
# docs-code-segment:end
|
||||
|
||||
|
||||
# docs-code-segment:start content-horizontal-break
|
||||
[[entrypoint]]
|
||||
id = 'content-horizontal-break'
|
||||
name = 'Grid Content Horizontal Break'
|
||||
path = 'src/content-horizontal-break.tsx'
|
||||
type = 'view'
|
||||
description = ''
|
||||
# docs-code-segment:end
|
||||
|
||||
[permissions]
|
||||
network = ["static.wikia.nocookie.net"]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { ReactElement } from "react";
|
||||
import { Grid } from "@project-gauntlet/api/components";
|
||||
|
||||
export default function ContentHorizontalBreak(): ReactElement {
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Item id="test">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Paragraph>
|
||||
C-3PO
|
||||
</Grid.Item.Content.Paragraph>
|
||||
<Grid.Item.Content.HorizontalBreak/>
|
||||
<Grid.Item.Content.Paragraph>
|
||||
BB-8
|
||||
</Grid.Item.Content.Paragraph>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,47 +1,14 @@
|
|||
import { ReactElement } from "react";
|
||||
import { Grid } from "@project-gauntlet/api/components";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Naboo",
|
||||
image: "https://static.wikia.nocookie.net/star-wars-canon/images/2/24/NabooFull-SW.png/revision/latest/scale-to-width-down/150?cb=20151218205422"
|
||||
},
|
||||
{
|
||||
title: "Ryloth",
|
||||
image: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b7/Ryloth_Rebels.png/revision/latest/scale-to-width-down/150?cb=20161103040944"
|
||||
},
|
||||
{
|
||||
title: "Tatooine",
|
||||
image: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b0/Tatooine_TPM.png/revision/latest/scale-to-width-down/150?cb=20151124205032"
|
||||
},
|
||||
{
|
||||
title: "Dagobah",
|
||||
image: "https://static.wikia.nocookie.net/star-wars-canon/images/4/48/Dagobah_ep3.jpg/revision/latest/scale-to-width-down/150?cb=20161103221846"
|
||||
},
|
||||
{
|
||||
title: "Endor",
|
||||
image: "https://static.wikia.nocookie.net/star-wars-canon/images/9/96/Endor-DB.png/revision/latest/scale-to-width-down/150?cb=20160711234205"
|
||||
},
|
||||
{
|
||||
title: "Dathomir",
|
||||
image: "https://static.wikia.nocookie.net/starwars/images/3/34/DathomirJFO.jpg/revision/latest/scale-to-width-down/150?cb=20200222032237"
|
||||
},
|
||||
{
|
||||
title: "Dantooine",
|
||||
image: "https://static.wikia.nocookie.net/starwars/images/a/a5/Dantooine_Resistance.jpg/revision/latest/scale-to-width-down/150?cb=20200120190043"
|
||||
},
|
||||
]
|
||||
|
||||
export default function ContentImageExample(): ReactElement {
|
||||
return (
|
||||
<Grid>
|
||||
{items.map(value => (
|
||||
<Grid.Item id={value.title} key={value.title} title={value.title}>
|
||||
<Grid.Item id="tatooine" title="Tatooine">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: value.image }}/>
|
||||
<Grid.Item.Content.Image source={{ url: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b0/Tatooine_TPM.png/revision/latest/scale-to-width-down/150?cb=20151124205032" }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
29
example_plugins/plugins/ui_grid/src/more-columns.tsx
Normal file
29
example_plugins/plugins/ui_grid/src/more-columns.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { ReactElement } from "react";
|
||||
import { Grid } from "@project-gauntlet/api/components";
|
||||
|
||||
const items = [
|
||||
"🥹",
|
||||
"🤣",
|
||||
"🥵",
|
||||
"🤕",
|
||||
"🫥",
|
||||
"🤬",
|
||||
"🥱",
|
||||
"🤮",
|
||||
"🙄",
|
||||
"🤠"
|
||||
]
|
||||
|
||||
export default function MoreColumnsExample(): ReactElement {
|
||||
return (
|
||||
<Grid columns={8}>
|
||||
{items.map(value => (
|
||||
<Grid.Item id={value} key={value}>
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Paragraph>{value}</Grid.Item.Content.Paragraph>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { ReactElement, useState } from "react";
|
||||
import { Action, ActionPanel, Grid } from "@project-gauntlet/api/components";
|
||||
|
||||
export default function SearchBarSetSearchTextExample(): ReactElement {
|
||||
const [searchText, setSearchText] = useState<string | undefined>("");
|
||||
|
||||
return (
|
||||
<Grid
|
||||
actions={
|
||||
<ActionPanel>
|
||||
<Action label="Set value" onAction={(id) => setSearchText(id)}/>
|
||||
</ActionPanel>
|
||||
}
|
||||
>
|
||||
<Grid.SearchBar placeholder="What knowledge do you seek...?"
|
||||
value={searchText}
|
||||
onChange={setSearchText}
|
||||
/>
|
||||
<Grid.Item id="This will be the value in search bar">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Paragraph>
|
||||
Click me!
|
||||
</Grid.Item.Content.Paragraph>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,16 +3,8 @@ import { Grid } from "@project-gauntlet/api/components";
|
|||
|
||||
const theBlade1 = "https://static.wikia.nocookie.net/starwars/images/a/a4/The-Blade-1-final-cover.jpg/revision/latest/scale-to-width-down/150?cb=20221215195606"
|
||||
const theBlade2 = "https://static.wikia.nocookie.net/starwars/images/f/fd/The-Blade-2-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230120033002"
|
||||
const theBlade3 = "https://static.wikia.nocookie.net/starwars/images/0/02/The-Blade-3-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230227203337"
|
||||
const theBlade4 = "https://static.wikia.nocookie.net/starwars/images/6/6c/The-Blade-4-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230321223753"
|
||||
|
||||
const vader1 = "https://static.wikia.nocookie.net/starwars/images/9/9a/Darth_VaderDark_Lord_of_the_Sith.jpg/revision/latest/scale-to-width-down/150?cb=20190223230434"
|
||||
const vader2 = "https://static.wikia.nocookie.net/starwars/images/2/2e/Darth_Vader_2_cover_art.jpg/revision/latest/scale-to-width-down/150?cb=20190223234228"
|
||||
const vader3 = "https://static.wikia.nocookie.net/starwars/images/d/df/DarthVader2017-3.jpg/revision/latest/scale-to-width-down/150?cb=20190224013414"
|
||||
const vader4 = "https://static.wikia.nocookie.net/starwars/images/c/c9/Darthvader-dlots-4-final.jpg/revision/latest/scale-to-width-down/150?cb=20190226024707"
|
||||
const vader5 = "https://static.wikia.nocookie.net/starwars/images/a/ab/Darthvader-dlots-5.jpg/revision/latest/scale-to-width-down/150?cb=20170826121053"
|
||||
const vader6 = "https://static.wikia.nocookie.net/starwars/images/2/20/DarthVader-DLotS--Solicitation.jpg/revision/latest/scale-to-width-down/150?cb=20171001165404"
|
||||
const vader7 = "https://static.wikia.nocookie.net/starwars/images/f/fa/DarthVader2017-7.jpg/revision/latest/scale-to-width-down/150?cb=20190226233333"
|
||||
|
||||
export default function SectionExample(): ReactElement {
|
||||
return (
|
||||
|
|
@ -28,16 +20,6 @@ export default function SectionExample(): ReactElement {
|
|||
<Grid.Item.Content.Image source={{ url: theBlade2 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="the-blade-3" title="The Blade 3">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: theBlade3 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="the-blade-4" title="The Blade 4">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: theBlade4 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
</Grid.Section>
|
||||
<Grid.Section title="Darth Vader">
|
||||
<Grid.Item id="darth-vader-1" title="Darth Vader 1">
|
||||
|
|
@ -45,36 +27,6 @@ export default function SectionExample(): ReactElement {
|
|||
<Grid.Item.Content.Image source={{ url: vader1 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-2" title="Darth Vader 2">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader2 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-3" title="Darth Vader 3">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader3 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-4" title="Darth Vader 4">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader4 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-5" title="Darth Vader 5">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader5 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-6" title="Darth Vader 6">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader6 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
<Grid.Item id="darth-vader-7" title="Darth Vader 7">
|
||||
<Grid.Item.Content>
|
||||
<Grid.Item.Content.Image source={{ url: vader7 }}/>
|
||||
</Grid.Item.Content>
|
||||
</Grid.Item>
|
||||
</Grid.Section>
|
||||
</Grid>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue