Skip to content

Commit

Permalink
Merge pull request #514 from tianenpang/docs/card-in-layout
Browse files Browse the repository at this point in the history 
fix(docs-layout): wrapped card in card.body and added background color
  • Loading branch information
@jrgarciadev
jrgarciadev committed Jun 7, 2022
2 parents a488bed + a238887 commit 2a16c0a
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 72 deletions.
50 changes: 30 additions & 20 deletions apps/docs/content/components/container/autoLayout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,51 @@ export default function App() {
<Container gap={0}>
<Row gap={1}>
<Col>
<Card color="primary">
<Text h6 size={15} color="white" css={{ m: 0 }}>
1 of 2
</Text>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
1 of 2
</Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card color="primary">
<Text h6 size={15} color="white" css={{ m: 0 }}>
2 of 2
</Text>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
2 of 2
</Text>
</Card.Body>
</Card>
</Col>
</Row>
<Spacer y={1} />
<Row gap={1}>
<Col>
<Card color="primary">
<Text h6 size={15} color="white" css={{ m: 0 }}>
1 of 3
</Text>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
1 of 3
</Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card color="primary">
<Text h6 size={15} color="white" css={{ m: 0 }}>
2 of 3
</Text>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
2 of 3
</Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card color="primary">
<Text h6 size={15} color="white" css={{ m: 0 }}>
3 of 3
</Text>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
3 of 3
</Text>
</Card.Body>
</Card>
</Col>
</Row>
Expand Down
18 changes: 10 additions & 8 deletions apps/docs/content/components/container/breakpoint.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
export default function App() {
return (
<Container xl>
<Card color="primary">
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
</Card.Body>
</Card>
</Container>
);
Expand Down
18 changes: 10 additions & 8 deletions apps/docs/content/components/container/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
export default function App() {
return (
<Container>
<Card color="primary">
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
</Card.Body>
</Card>
</Container>
);
Expand Down
18 changes: 10 additions & 8 deletions apps/docs/content/components/container/fluid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
export default function App() {
return (
<Container fluid>
<Card color="primary">
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Row justify="center" align="center">
<Text h6 size={15} color="white" css={{ m: 0 }}>
NextUI gives you the best developer experience with all the features
you need for building beautiful and modern websites and
applications.
</Text>
</Row>
</Card.Body>
</Card>
</Container>
);
Expand Down
10 changes: 6 additions & 4 deletions apps/docs/content/components/grid/autoWidth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ const App = `import { Grid, Card, Text } from "@nextui-org/react";
export default function App() {
const MockItem = ({ text }) => {
return (
<Card color="primary" css={{ h: "$20" }}>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
<Card css={{ h: "$20", $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
</Card.Body>
</Card>
);
};
Expand Down
10 changes: 6 additions & 4 deletions apps/docs/content/components/grid/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ const App = `import { Grid, Card, Text } from "@nextui-org/react";
export default function App() {
const MockItem = ({ text }) => {
return (
<Card color="primary" css={{ h: "$24" }}>
<Text h6 size={15} color="white" css={{ mt: 0 }}>
{text}
</Text>
<Card css={{ h: "$24", $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ mt: 0 }}>
{text}
</Text>
</Card.Body>
</Card>
);
};
Expand Down
10 changes: 6 additions & 4 deletions apps/docs/content/components/grid/fluid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ const App = `import { Grid, Card, Text } from "@nextui-org/react";
export default function App() {
const MockItem = ({ text }) => {
return (
<Card color="primary" css={{ h: "$20" }}>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
<Card css={{ h: "$20", $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
</Card.Body>
</Card>
);
};
Expand Down
10 changes: 6 additions & 4 deletions apps/docs/content/components/grid/hideElement.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,12 @@ export default function App() {
const MockItem = ({ text }) => {
return (
<Card color="primary" css={{ h: "$20" }}>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
<Card css={{ h: "$20", $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
</Card.Body>
</Card>
);
};
Expand Down
10 changes: 6 additions & 4 deletions apps/docs/content/components/grid/responsive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@ export default function App() {
const MockItem = ({ text }) => {
return (
<Card color="primary" css={{ h: "$20" }}>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
<Card css={{ h: "$20", $$cardColor: '$colors$primary' }}>
<Card.Body>
<Text h6 size={15} color="white" css={{ m: 0 }}>
{text}
</Text>
</Card.Body>
</Card>
);
};
Expand Down
8 changes: 6 additions & 2 deletions apps/docs/content/components/spacer/horizontal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ const AppJs = `import { Spacer, Card } from "@nextui-org/react";
export default function App() {
return (
<Container gap={0} css={{ d: 'flex', flexWrap: 'nowrap' }}>
<Card color="primary" />
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body />
</Card>
<Spacer x={2} />
<Card color="primary" />
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body />
</Card>
</Container>
);
}`;
Expand Down
18 changes: 12 additions & 6 deletions apps/docs/content/components/spacer/vertical.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,22 @@ const AppJs = `import { Spacer, Card } from "@nextui-org/react";
export default function App() {
return (
<>
<Card color="primary">
<Spacer y={1} />
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Spacer y={1} />
</Card.Body>
</Card>
<Spacer y={1} />
<Card color="primary">
<Spacer y={2} />
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Spacer y={2} />
</Card.Body>
</Card>
<Spacer y={1} />
<Card color="primary">
<Spacer y={3} />
<Card css={{ $$cardColor: '$colors$primary' }}>
<Card.Body>
<Spacer y={3} />
</Card.Body>
</Card>
</>
);
Expand Down

1 comment on commit 2a16c0a

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for nextui-docs ready!

✅ Preview
https://nextui-docs-jq503awdl-nextui-org.vercel.app

Built with commit 2a16c0a.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.