Skip to content

Commit

Permalink
Merge pull request #258 from Gauravtb2253/add-props-table
Browse files Browse the repository at this point in the history 
added props table
  • Loading branch information
@Jaishree2310
Jaishree2310 authored Oct 18, 2024
2 parents c67d58d + cf128df commit 407f72e
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 16 deletions.
37 changes: 37 additions & 0 deletions src/components/AccordionDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,43 @@ const AccordionDetails: React.FC = () => {
/>
</div>
</div>

{/* Props */}
<section
className={`${getGlassyClasses()} p-6 mb-14 text-white relative z-10`}
>
<h2 className='text-3xl font-bold mb-4 text-gray-100'>Props</h2>
<div className='overflow-x-auto'>
<table className='w-full'>
<thead>
<tr className='bg-white bg-opacity-20'>
<th className='text-left p-2 text-gray-100'>Prop</th>
<th className='text-left p-2 text-gray-100'>Type</th>
<th className='text-left p-2 text-gray-100'>Default</th>
<th className='text-left p-2 text-gray-100'>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className='p-2 text-gray-200'>title</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
Title of the accordian
</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2 text-gray-200'>content</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
Content to be shown in the accordian
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</div>
Expand Down
34 changes: 18 additions & 16 deletions src/components/CardDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,30 +228,32 @@ function Example() {
<table className='w-full'>
<thead>
<tr className='bg-white bg-opacity-20'>
<th className='text-left p-2'>Prop</th>
<th className='text-left p-2'>Type</th>
<th className='text-left p-2'>Default</th>
<th className='text-left p-2'>Description</th>
<th className='text-left p-2 text-gray-100'>Prop</th>
<th className='text-left p-2 text-gray-100'>Type</th>
<th className='text-left p-2 text-gray-100'>Default</th>
<th className='text-left p-2 text-gray-100'>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className='p-2'>className</td>
<td className='p-2'>string</td>
<td className='p-2'>''</td>
<td className='p-2'>Additional CSS classes</td>
<td className='p-2 text-gray-200'>className</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>Additional CSS classes</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2'>style</td>
<td className='p-2'>object</td>
<td className='p-2'>{'{}'}</td>
<td className='p-2'>Inline styles for the card</td>
<td className='p-2 text-gray-200'>style</td>
<td className='p-2 text-gray-200'>object</td>
<td className='p-2 text-gray-200'>{'{}'}</td>
<td className='p-2 text-gray-200'>
Inline styles for the card
</td>
</tr>
<tr>
<td className='p-2'>children</td>
<td className='p-2'>ReactNode</td>
<td className='p-2'>-</td>
<td className='p-2'>Card content</td>
<td className='p-2 text-gray-200'>children</td>
<td className='p-2 text-gray-200'>ReactNode</td>
<td className='p-2 text-gray-200'>-</td>
<td className='p-2 text-gray-200'>Card content</td>
</tr>
</tbody>
</table>
Expand Down
53 changes: 53 additions & 0 deletions src/components/ContactUsDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,59 @@ const ContactUsDetailsPage: React.FC = () => {
</div>
</div>
</div>

{/* Props */}
<section
className={`${getGlassyClasses()} p-6 mb-14 text-white relative z-10`}
>
<h2 className='text-3xl font-bold mb-4 text-gray-100'>Props</h2>
<div className='overflow-x-auto'>
<table className='w-full'>
<thead>
<tr className='bg-white bg-opacity-20'>
<th className='text-left p-2 text-gray-100'>Prop</th>
<th className='text-left p-2 text-gray-100'>Type</th>
<th className='text-left p-2 text-gray-100'>Default</th>
<th className='text-left p-2 text-gray-100'>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className='p-2 text-gray-200'>name</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
The full name of the user.
</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2 text-gray-200'>phone</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
The user's contact number.
</td>
</tr>
<tr>
<td className='p-2 text-gray-200'>email</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
The email address of the user.
</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2 text-gray-200'>message</td>
<td className='p-2 text-gray-200'>string</td>
<td className='p-2 text-gray-200'>''</td>
<td className='p-2 text-gray-200'>
The message content that the user wishes to send.
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
);
Expand Down
35 changes: 35 additions & 0 deletions src/components/DropdowndetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,41 @@ const DropdownMenuDetailsPage: React.FC = () => {
<CopyButton text={dropdownExampleCode} codeKey='dropdownExample' />
</div>
</div>

{/* Props */}
<section
className={`${getGlassyClasses()} p-6 mb-14 text-white relative z-10`}
>
<h2 className='text-3xl font-bold mb-4 text-gray-100'>Props</h2>
<div className='overflow-x-auto'>
<table className='w-full'>
<thead>
<tr className='bg-white bg-opacity-20'>
<th className='text-left p-2 text-gray-100'>Prop</th>
<th className='text-left p-2 text-gray-100'>Type</th>
<th className='text-left p-2 text-gray-100'>Default</th>
<th className='text-left p-2 text-gray-100'>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className='p-2 text-gray-200'>options</td>
<td className='p-2 text-gray-200'>array</td>
<td className='p-2 text-gray-200'>[ ]</td>
<td className='p-2 text-gray-200'>Items in the dropdown</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2 text-gray-200'>onSelect</td>
<td className='p-2 text-gray-200'>function</td>
<td className='p-2 text-gray-200'>-</td>
<td className='p-2 text-gray-200'>
Task to do after selecting the option
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/GlassyUIComponentsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,3 +342,5 @@ const GlassyUIComponentsPage: React.FC = () => {
};

export default GlassyUIComponentsPage;

// dropdown menu, accordian, contact us,

0 comments on commit 407f72e

Please sign in to comment.