Skip to content

Commit

Permalink
Fix spacing in docs, remove react warnings (#607)
Browse files Browse the repository at this point in the history
  • Loading branch information
@krau5
krau5 authored Dec 6, 2024
1 parent 7539a7f commit 297248b
Show file tree
Hide file tree
Showing 35 changed files with 570 additions and 615 deletions.
47 changes: 22 additions & 25 deletions docs/app/docs/components/accordion/docs/codeUsage.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
const code = {
javascript: {
code: `import Accordion from "@radui/ui/Accordion"
code: `
import Accordion from "@radui/ui/Accordion";
const AccordionExample = () => {
let items = [
{
title: "React",
content: "React is a JavaScript library for building user interfaces."
},
{
title: "Angular",
content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript."
},
{
title: "Vue",
content: "Vue.js is a progressive framework for building user interfaces."
},
{
title: "React",
content: "React is a JavaScript library for building user interfaces."
},
{
title: "Angular",
content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript."
},
{
title: "Vue",
content: "Vue.js is a progressive framework for building user interfaces."
}
]
return <div style={{width:"400px"}}>
<Accordion items={items}>
</Accordion>
</div>
}
export const AccordionExample = () => (
<div style={{ width: "400px" }}>
<Accordion items={items} />
</div>
)
`
},
scss: {
Expand Down Expand Up @@ -79,7 +76,7 @@ return <div style={{width:"400px"}}>
}
}
}`
},
}
}
};

export default code;
export default code;
30 changes: 15 additions & 15 deletions docs/app/docs/components/button/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
const PAGE_NAME = 'BADGE_DOCS'
import Documentation from "@/components/layout/Documentation/Documentation"
import Documentation from '@/components/layout/Documentation/Documentation';
import Button from '@radui/ui/Button';
import SEO from '../../docsIndex';
import codeUsage from './docs/codeUsage';

const PAGE_NAME = 'BUTTON_DOCS';

import Button from "@radui/ui/Button"
import SEO from "../../docsIndex"
export const metadata = SEO.getMetadata(PAGE_NAME)

import codeUsage from "./docs/codeUsage"
export const metadata = SEO.getMetadata(PAGE_NAME);

const Arrow = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const AvatarDocs = () => {
const ButtonDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Button' description={`
<Documentation
currentPage={PAGE_NAME} title='Button' description={`
Buttons are used to trigger an action. You can use them in forms, dialogs, and more.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<div style={{ display: "flex", gap: 20 }}>
<div style={{ display: 'flex', gap: 20 }}>
<Button color="green" className="space-x-2" ><span>Click Me! </span><Arrow /></Button>
</div>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default ButtonDocs;
30 changes: 19 additions & 11 deletions docs/app/docs/components/callout/docs/codeUsage.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
const code = {
javascript: {
code: `<Callout color="red">
code: `
import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";
const CalloutExample = () => (
<Callout color="red">
<div className="flex items-start">
<Arrow/>
<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
<BookmarkIcon />
<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
</div>
</Callout>
`},
</Callout>
)
`
},
scss: {
code: `.rad-ui-callout {
padding:16px;
Expand All @@ -22,7 +30,7 @@ const code = {
font-size: 14px;
gap:8px;
}`
},
}
}
};

export default code;
export default code;
39 changes: 19 additions & 20 deletions docs/app/docs/components/callout/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
const PAGE_NAME = 'Card'
import Documentation from "@/components/layout/Documentation/Documentation"
import Documentation from '@/components/layout/Documentation/Documentation';
import Callout from '@radui/ui/Callout';
import Text from '@radui/ui/Text';
import SEO from '../../docsIndex';
import codeUsage from './docs/codeUsage';

const PAGE_NAME = 'Callout';

import Callout from "@radui/ui/Callout"
import Text from "@radui/ui/Text"
import Avatar from "@radui/ui/Avatar"
import SEO from "../../docsIndex"
export const metadata = SEO.getMetadata(PAGE_NAME)
export const metadata = SEO.getMetadata(PAGE_NAME);

import codeUsage from "./docs/codeUsage"

const Arrow = () => {
return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
const BookmarkIcon = () => {
return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const CalloutDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Callout' description={`
<Documentation
currentPage={PAGE_NAME} title='Callout' description={`
Callout is a component that can be used to display a message or a notification to the user.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<Callout color="red">
<Callout color="red">
<div className="flex items-start">
<Arrow/>
<BookmarkIcon />

<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
</div>
</Callout>
</Callout>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default CalloutDocs;
export default CalloutDocs;
47 changes: 21 additions & 26 deletions docs/app/docs/components/card/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,34 @@
const PAGE_NAME = 'Card'
import Documentation from "@/components/layout/Documentation/Documentation"
import Documentation from '@/components/layout/Documentation/Documentation';

import Card from '@radui/ui/Card';
import Avatar from '@radui/ui/Avatar';
import SEO from '../../docsIndex';

import Card from "@radui/ui/Card"
import Avatar from "@radui/ui/Avatar"
import SEO from "../../docsIndex"
export const metadata = SEO.getMetadata(PAGE_NAME)
import codeUsage from './docs/codeUsage';
const PAGE_NAME = 'Card';
export const metadata = SEO.getMetadata(PAGE_NAME);

import codeUsage from "./docs/codeUsage"

const Arrow = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}

const AvatarDocs = () => {
const CardDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Card' description={`
<Documentation
currentPage={PAGE_NAME} title='Card' description={`
Cards are used to group related information and actions. They are used to display information in a structured way.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<Card data-accent-color="green" className="bg-gray-50 text-gray-950 flex items-center space-x-2">
<Avatar fallback="PK" />
<div>
<div className="font-medium">
Peter Kowalsky
</div>
<div className="text-xs text-gray-800">
Content Engineer
</div>
<Avatar fallback="PK" />
<div>
<div className="font-medium">
Peter Kowalsky
</div>
<div className="text-xs text-gray-800">
Content Engineer
</div>
</div>
</Card>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default CardDocs;
29 changes: 12 additions & 17 deletions docs/app/docs/components/code/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
const PAGE_NAME = 'BADGE_DOCS'
import Documentation from "@/components/layout/Documentation/Documentation"
import Documentation from '@/components/layout/Documentation/Documentation';
import Code from '@radui/ui/Code';
import SEO from '../../docsIndex';
import codeUsage from './docs/codeUsage';

const PAGE_NAME = 'CODE_DOCS';
export const metadata = SEO.getMetadata(PAGE_NAME);

import Code from "@radui/ui/Code"
import SEO from "../../docsIndex"
export const metadata = SEO.getMetadata(PAGE_NAME)

import codeUsage from "./docs/codeUsage"

const Arrow = () => {
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}

const AvatarDocs = () => {
const CodeDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Code' description={`
<Documentation
currentPage={PAGE_NAME} title='Code' description={`
Code is used to display inline code.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
Expand All @@ -24,7 +19,7 @@ const AvatarDocs = () => {
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default CodeDocs;
17 changes: 8 additions & 9 deletions docs/app/docs/components/kbd/docs/codeUsage.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
const code = {
javascript: {
code: `import Kbd from "@radui/ui/Kbd"
code: `import Kbd from "@radui/ui/Kbd";
const KbdExample = () => {
return <Kbd>Ctrl + C</Kbd>
}
<Kbd>Ctrl + C</Kbd>`
const KbdExample = () => (
<Kbd>Ctrl + C</Kbd>
)
`
},
css: {
code: `.rad-ui-kbd{
Expand All @@ -24,7 +23,7 @@ const KbdExample = () => {
box-shadow: 0px 0px 3px 1px var(--rad-ui-color-gray-400);
padding: 4px 8px;
}`
},
}
}
};

export default code;
export default code;
22 changes: 11 additions & 11 deletions docs/app/docs/components/progress/docs/codeUsage.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
const code = {
javascript: {
code: `import Progress from "@radui/ui/Progress"
code: `
import Progress from "@radui/ui/Progress";
const ProgressExample = () => {
return <div style={{width:"200px"}}>
<Progress value={90} />
</div>
}
<Kbd>Ctrl + C</Kbd>`
const ProgressExample = () => (
<div style={{ width: "200px" }}>
<Progress value={90} />
</div>
)
`
},
css: {
code: `.rad-ui-progress {
Expand All @@ -25,7 +25,7 @@ const ProgressExample = () => {
border-radius: 8px;
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}`
},
}
}
};

export default code;
export default code;
Loading

0 comments on commit 297248b

Please sign in to comment.