├── .DS_Store ├── .eslintignore ├── .eslintrc.js ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc.js ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENCE.md ├── README.md ├── components ├── .DS_Store ├── kit │ ├── .DS_Store │ ├── components │ │ ├── .DS_Store │ │ ├── commerce │ │ │ ├── index.tsx │ │ │ ├── pricing │ │ │ │ ├── PricingCard.tsx │ │ │ │ ├── PricingCard2.tsx │ │ │ │ ├── PricingCard3.tsx │ │ │ │ ├── PricingCard4.tsx │ │ │ │ ├── PricingCard5.tsx │ │ │ │ ├── PricingCard6.tsx │ │ │ │ ├── PricingCard7.tsx │ │ │ │ ├── PricingCard8.tsx │ │ │ │ └── PricingCard9.tsx │ │ │ └── shopping │ │ │ │ ├── ClassicShoppingCard.tsx │ │ │ │ ├── MultipleShoppingCard.tsx │ │ │ │ ├── ProductWithEval.tsx │ │ │ │ ├── ShippedCard.tsx │ │ │ │ ├── ShoppingColorChoice.tsx │ │ │ │ ├── ShoppingDetailsCard.tsx │ │ │ │ └── SimpleShoppingCard.tsx │ │ ├── elements │ │ │ ├── alert │ │ │ │ ├── BandeauAlert.tsx │ │ │ │ ├── BandeauLineAlert.tsx │ │ │ │ ├── ClosableLongAlert.tsx │ │ │ │ ├── ConfirmationCard.tsx │ │ │ │ ├── CookieAlert2.tsx │ │ │ │ ├── InformationCard.tsx │ │ │ │ ├── InformationModale.tsx │ │ │ │ └── SimpleAlert.tsx │ │ │ ├── avatars │ │ │ │ ├── Avatar.tsx │ │ │ │ └── MultipleAvatar.tsx │ │ │ ├── badges │ │ │ │ ├── Badge.tsx │ │ │ │ ├── BadgeList.tsx │ │ │ │ ├── ClickableBadge.tsx │ │ │ │ ├── ColoredTextAndBadge.tsx │ │ │ │ ├── NotificationBadge.tsx │ │ │ │ └── NotificationIconBadge.tsx │ │ │ ├── buttons │ │ │ │ ├── Button.tsx │ │ │ │ ├── ButtonWithIndications.tsx │ │ │ │ ├── MultipleButton.tsx │ │ │ │ ├── PagerButton.tsx │ │ │ │ ├── RoundedButton.tsx │ │ │ │ ├── SquareButton.tsx │ │ │ │ └── StoreButton.tsx │ │ │ ├── data │ │ │ │ ├── ActivityCard.tsx │ │ │ │ ├── CalendarCard.tsx │ │ │ │ ├── CalendarCardMonth.tsx │ │ │ │ ├── CovidInfo.tsx │ │ │ │ ├── GoogleTask.tsx │ │ │ │ ├── InfoNumberCard.tsx │ │ │ │ ├── InfoNumberCard2.tsx │ │ │ │ ├── InfoNumberCard3.tsx │ │ │ │ ├── InformationIconCard.tsx │ │ │ │ ├── JobCard.tsx │ │ │ │ ├── LessonsList.tsx │ │ │ │ ├── MessagesList.tsx │ │ │ │ ├── MutlipleTask.tsx │ │ │ │ ├── PaymentCard.tsx │ │ │ │ ├── PopularPerson.tsx │ │ │ │ ├── ProjectDataCard.tsx │ │ │ │ ├── RecapCard.tsx │ │ │ │ ├── SimpleIconDescCard.tsx │ │ │ │ ├── SimpleLevelsCard.tsx │ │ │ │ ├── SimpleNotificationCard.tsx │ │ │ │ ├── SimplePhotoDescCard.tsx │ │ │ │ ├── SimpleTask.tsx │ │ │ │ ├── SlackTask.tsx │ │ │ │ ├── TagsCard.tsx │ │ │ │ ├── TaskCard.tsx │ │ │ │ ├── TasksList.tsx │ │ │ │ └── VideoDetailsCard.tsx │ │ │ ├── ddm │ │ │ │ ├── DropDownMenu.tsx │ │ │ │ ├── DropDownMenuWithForm.tsx │ │ │ │ └── LargeDropDownMenu.tsx │ │ │ ├── index.tsx │ │ │ ├── progress │ │ │ │ └── ProgressBar.tsx │ │ │ ├── skeleton │ │ │ │ ├── HorizontalSkeletonCard.tsx │ │ │ │ ├── PictureAndTextSkeleton.tsx │ │ │ │ └── SimpleSkeleton.tsx │ │ │ └── tabs │ │ │ │ ├── BasicTabs.tsx │ │ │ │ ├── BasicTabsDisabled.tsx │ │ │ │ └── BasicTabsUnderline.tsx │ │ ├── form │ │ │ ├── dateTimePicker │ │ │ │ └── TimePicker.tsx │ │ │ ├── index.tsx │ │ │ ├── inputtext │ │ │ │ ├── InputArea.tsx │ │ │ │ ├── InputGroup.tsx │ │ │ │ └── InputText.tsx │ │ │ ├── layout │ │ │ │ ├── ContactForm.tsx │ │ │ │ ├── CreateAccount.tsx │ │ │ │ ├── DesignLogin.tsx │ │ │ │ ├── FormSubscribe.tsx │ │ │ │ ├── LoginWithBackground.tsx │ │ │ │ ├── SearchForm.tsx │ │ │ │ ├── SignIn.tsx │ │ │ │ └── UserInfoForm.tsx │ │ │ ├── select │ │ │ │ ├── CustomSelect.tsx │ │ │ │ ├── Select.tsx │ │ │ │ └── SelectWithLabel.tsx │ │ │ └── toggle │ │ │ │ ├── Checkbox.tsx │ │ │ │ ├── MultipleToggle.tsx │ │ │ │ ├── Radio.tsx │ │ │ │ └── Toggle.tsx │ │ ├── list │ │ │ ├── index.tsx │ │ │ ├── list │ │ │ │ ├── BlockList.tsx │ │ │ │ ├── DescriptionList.tsx │ │ │ │ ├── SimpleList.tsx │ │ │ │ └── TodoList.tsx │ │ │ └── table │ │ │ │ ├── ComplexTable.tsx │ │ │ │ └── Table.tsx │ │ ├── navigation │ │ │ ├── footer │ │ │ │ ├── Footer.tsx │ │ │ │ ├── FooterLight.tsx │ │ │ │ └── SimpleFooter.tsx │ │ │ ├── header │ │ │ │ ├── CenterHeader.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── SearchHeader.tsx │ │ │ │ └── SimpleSearchHeader.tsx │ │ │ ├── index.tsx │ │ │ └── sidebar │ │ │ │ ├── LittleSidebar.tsx │ │ │ │ ├── SideBar2.tsx │ │ │ │ ├── Sidebar.tsx │ │ │ │ └── SidebarWithCateg.tsx │ │ ├── pagesection │ │ │ ├── blog │ │ │ │ ├── BlogCard.tsx │ │ │ │ └── BlogList.tsx │ │ │ ├── cta │ │ │ │ ├── BandeauInfo.tsx │ │ │ │ ├── BandeauNumber.tsx │ │ │ │ ├── MultipleImagesCta.tsx │ │ │ │ ├── NextJSCta.tsx │ │ │ │ ├── NotifyMeCta.tsx │ │ │ │ ├── SimpleTextCta.tsx │ │ │ │ ├── SubscribeCta.tsx │ │ │ │ ├── TimerEvent.tsx │ │ │ │ └── WatchCta.tsx │ │ │ ├── faq │ │ │ │ ├── Faq.tsx │ │ │ │ └── FaqHori.tsx │ │ │ ├── feature │ │ │ │ ├── FeaturesAndDesc.tsx │ │ │ │ ├── FeaturesCards.tsx │ │ │ │ ├── FeaturesImage.tsx │ │ │ │ ├── FeaturesImage2.tsx │ │ │ │ └── FeaturesSquare.tsx │ │ │ ├── index.tsx │ │ │ ├── profile │ │ │ │ ├── AddProfilInfo.tsx │ │ │ │ ├── CoverAndButtonsProfilCard.tsx │ │ │ │ ├── CoverAndInfoProfil.tsx │ │ │ │ ├── FullPhotoCard.tsx │ │ │ │ ├── HeadProfil.tsx │ │ │ │ └── SimpleProfil.tsx │ │ │ ├── team │ │ │ │ ├── AllTeam.tsx │ │ │ │ ├── DoubleTeam.tsx │ │ │ │ ├── ShadowTeam.tsx │ │ │ │ ├── ShadowTeams.tsx │ │ │ │ ├── SimpleTeam.tsx │ │ │ │ └── SimpleTeams.tsx │ │ │ └── testimonial │ │ │ │ ├── BigTestimonial.tsx │ │ │ │ ├── BigTestimonialFlex.tsx │ │ │ │ ├── FullWidthTesti.tsx │ │ │ │ ├── HeadTestimonial.tsx │ │ │ │ ├── MultipleTestimonial.tsx │ │ │ │ ├── ReviewWithRate.tsx │ │ │ │ ├── SimpleReview.tsx │ │ │ │ └── SimpleTestimonial.tsx │ │ └── profile │ │ │ └── GroupInfo.tsx │ └── templates │ │ ├── dashboardPages │ │ ├── dataDashboard │ │ │ └── KpitDashboard.tsx │ │ ├── index.tsx │ │ └── projectDashboard │ │ │ └── SimpleProjectDashboard.tsx │ │ ├── errorsPages │ │ ├── error404 │ │ │ ├── Background404.tsx │ │ │ ├── Pictures404.tsx │ │ │ └── Simple404.tsx │ │ └── index.tsx │ │ └── homePages │ │ ├── folio │ │ └── SimpleFolioHome.tsx │ │ ├── index.tsx │ │ └── simplePage │ │ ├── Natural2Home.tsx │ │ ├── Natural3Home.tsx │ │ ├── NaturalHome.tsx │ │ ├── NextJSHome.tsx │ │ ├── TailkitHome.tsx │ │ └── Watch.tsx ├── layout │ ├── AppLayout.tsx │ ├── ComponentLayout.tsx │ └── HomeLayout.tsx └── site │ ├── DropDown │ └── DropD.tsx │ ├── Meta.tsx │ ├── header │ ├── AppHeader.tsx │ ├── SectionHeader.tsx │ └── header.tsx │ ├── home │ └── HomeComps.tsx │ └── section │ └── SectionDesc.tsx ├── editorTheme.tsx ├── global.css ├── lib └── gtag.js ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── components │ ├── alert │ │ └── index.tsx │ ├── avatar │ │ └── index.tsx │ ├── badges │ │ └── index.tsx │ ├── blog │ │ └── index.tsx │ ├── buttons │ │ └── index.tsx │ ├── cta │ │ └── index.tsx │ ├── data │ │ └── index.tsx │ ├── ddm │ │ └── index.tsx │ ├── faq │ │ └── index.tsx │ ├── feature │ │ └── index.tsx │ ├── footer │ │ └── index.tsx │ ├── form │ │ └── index.tsx │ ├── header │ │ └── index.tsx │ ├── index.tsx │ ├── inputselect │ │ └── index.tsx │ ├── inputtext │ │ └── index.tsx │ ├── list │ │ └── index.tsx │ ├── pricing │ │ └── index.tsx │ ├── profile │ │ └── index.tsx │ ├── progress │ │ └── index.tsx │ ├── shopping │ │ └── index.tsx │ ├── sidebar │ │ └── index.tsx │ ├── skeleton │ │ └── index.tsx │ ├── table │ │ └── index.tsx │ ├── tabs │ │ └── index.tsx │ ├── team │ │ └── index.tsx │ ├── testimonial │ │ └── index.tsx │ └── toggle │ │ └── index.tsx ├── index.tsx ├── request │ └── index.tsx ├── started │ └── index.tsx └── templates │ ├── dashboard │ └── index.tsx │ ├── datadashboard │ └── index.tsx │ ├── errors404 │ └── index.tsx │ ├── folio │ └── index.tsx │ ├── getStarted │ └── index.tsx │ ├── index.tsx │ └── simpleHome │ └── index.tsx ├── postcss.config.js ├── public ├── .DS_Store ├── ads.txt ├── banner.jpg ├── dashboard.png ├── demo.gif ├── home.png ├── icons │ ├── .DS_Store │ ├── check-circle.svg │ ├── check.svg │ ├── cookie.svg │ ├── rocket.png │ └── rocket.svg ├── images │ ├── .DS_Store │ ├── blog │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 6.jpg │ ├── car │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ └── 2.jpg │ ├── food │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── illustrations │ │ └── 1.svg │ ├── landscape │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.svg │ │ ├── 6.svg │ │ ├── 7.svg │ │ └── 8.svg │ ├── object │ │ ├── .DS_Store │ │ ├── 1.png │ │ ├── 10.png │ │ ├── 11.svg │ │ ├── 12.svg │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.jpg │ │ ├── 5.png │ │ ├── 5.webp │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── person │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.webp │ │ ├── 2.jpeg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ └── sections │ │ ├── .DS_Store │ │ ├── 404.png │ │ ├── alerte.png │ │ ├── avatar.png │ │ ├── badges.png │ │ ├── blog.png │ │ ├── button.png │ │ ├── coming.gif │ │ ├── cta.png │ │ ├── dashboard.png │ │ ├── data.png │ │ ├── datadashboard.png │ │ ├── ddm.png │ │ ├── faq.png │ │ ├── feature.png │ │ ├── folio.png │ │ ├── folio.webp │ │ ├── footer.png │ │ ├── header.png │ │ ├── homePage.png │ │ ├── homePage.webp │ │ ├── homePage2.png │ │ ├── homePage2.webp │ │ ├── homePage3.png │ │ ├── homePage3.webp │ │ ├── homePage4.png │ │ ├── homePage4.webp │ │ ├── homePage5.png │ │ ├── homePage5.webp │ │ ├── input.png │ │ ├── list.png │ │ ├── login.png │ │ ├── pricing.png │ │ ├── profile.png │ │ ├── progress.png │ │ ├── select.png │ │ ├── shopping.png │ │ ├── sidebar.png │ │ ├── skeleton.png │ │ ├── table.png │ │ ├── tabs.png │ │ ├── team.png │ │ ├── testimonial.png │ │ └── toggle.png ├── pub.mp4 ├── request.png ├── robots.txt ├── sitemap.htm ├── sitemap.xml ├── template.png └── template2.png ├── pull_request_template.md ├── tailwind.config.js ├── tsconfig.json ├── utils └── Utils.ts └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charlie85270/tail-kit/80efd91e8e40fd6b3e0f20fd0a00dd7614593fa9/.DS_Store -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | ./next-end.d.ts 2 | ./next.config.js 3 | ./postcss.config.js 4 | ./tailwind.config.js 5 | ./build 6 | ./node_modules 7 | ./public 8 | ./lib/gtag.js -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | parserOptions: { 4 | ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features 5 | sourceType: 'module', // Allows for the use of imports 6 | ecmaFeatures: { 7 | jsx: true, // Allows for the parsing of JSX 8 | }, 9 | }, 10 | settings: { 11 | react: { 12 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 13 | }, 14 | }, 15 | extends: [ 16 | 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 17 | 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin 18 | 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier 19 | 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. 20 | ], 21 | rules: { 22 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 23 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 24 | // suppress errors for missing 'import React' in files 25 | 'react/react-in-jsx-scope': 'off', 26 | 'react/no-unescaped-entities': 'off', 27 | '@typescript-eslint/explicit-module-boundary-types': 'off', 28 | 'react/prop-types': [2, { ignore: ['children'] }], 29 | // allow jsx syntax in js files (for next.js project) 30 | 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], //should add ".ts" if typescript project 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: Charlie85270 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build/ 3 | out/ 4 | .DS_STORE -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: "all", 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 4, 7 | }; 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /LICENCE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Charlie Rabiller 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charlie85270/tail-kit/80efd91e8e40fd6b3e0f20fd0a00dd7614593fa9/components/.DS_Store -------------------------------------------------------------------------------- /components/kit/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charlie85270/tail-kit/80efd91e8e40fd6b3e0f20fd0a00dd7614593fa9/components/kit/.DS_Store -------------------------------------------------------------------------------- /components/kit/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Charlie85270/tail-kit/80efd91e8e40fd6b3e0f20fd0a00dd7614593fa9/components/kit/components/.DS_Store -------------------------------------------------------------------------------- /components/kit/components/commerce/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import SectionDesc from '../../../site/section/SectionDesc'; 3 | 4 | const Commerce: FC = () => { 5 | const commerceSections = [ 6 | { 7 | title: 'Pricing cards', 8 | items: 9, 9 | img: 'images/sections/pricing.png', 10 | link: '/components/pricing', 11 | }, 12 | { 13 | title: 'Shopping cards', 14 | items: 7, 15 | img: 'images/sections/shopping.png', 16 | link: '/components/shopping', 17 | }, 18 | ]; 19 | 20 | return ; 21 | }; 22 | 23 | export default Commerce; 24 | -------------------------------------------------------------------------------- /components/kit/components/commerce/pricing/PricingCard8.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Button from '../../elements/buttons/Button'; 3 | 4 | const PricingCard8: FC = () => { 5 | return ( 6 |
7 |
8 |
Basic
9 |
10 |
5000 products
All features
11 |
Free support
12 |
13 |
14 | 249 $ 15 |
16 |
/ month
17 |
18 |
20 |
21 |
22 | ); 23 | }; 24 | export default PricingCard8; 25 | -------------------------------------------------------------------------------- /components/kit/components/commerce/pricing/PricingCard9.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Button from '../../elements/buttons/Button'; 3 | 4 | const PricingCard9: FC = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 | Business 11 | Plan 12 |
13 |
14 |

12 of 20 user

15 |
16 |
17 | 60% 18 |
19 |
20 |
21 |
22 | 23 |
24 |

25 | $ 199 / month 26 |

27 |
29 |
30 |
31 | ); 32 | }; 33 | export default PricingCard9; 34 | -------------------------------------------------------------------------------- /components/kit/components/commerce/shopping/ProductWithEval.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const ProductWithEval: FC = () => { 3 | return ( 4 |
5 |
6 |
7 |

Tomorow

8 |

9 | You can't buy your future, but you can do it. Money is nothing, you'r everything. 10 |

11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |

$220

30 | 33 |
34 |
35 |
36 | ); 37 | }; 38 | export default ProductWithEval; 39 | -------------------------------------------------------------------------------- /components/kit/components/commerce/shopping/ShippedCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const ShippedCard: FC = () => { 3 | return ( 4 |
5 |
6 |
7 | 15 | 16 | 17 |

by express

18 |

Package delivered

19 |

20 | Your package was delivered in 1 day and 4 hours by our postal partner 21 |

22 |
23 |
24 |
25 | ); 26 | }; 27 | export default ShippedCard; 28 | -------------------------------------------------------------------------------- /components/kit/components/commerce/shopping/ShoppingDetailsCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const ShoppingDetailsCard: FC = () => { 3 | return ( 4 |
5 | adidas 6 | 7 |
8 |

Adidas

9 |

Live your dream

10 |
11 |

$98.00

12 | 27 |
28 |
29 |
30 | ); 31 | }; 32 | export default ShoppingDetailsCard; 33 | -------------------------------------------------------------------------------- /components/kit/components/commerce/shopping/SimpleShoppingCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const SimpleShoppingCard: FC = () => { 3 | return ( 4 |
5 | moto 6 |
7 |

Avg

8 |

9 | Detail is not an obsession, it is the very essence of perfection. 10 |

11 |

$399

12 |
13 |
14 | ); 15 | }; 16 | export default SimpleShoppingCard; 17 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/BandeauLineAlert.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | title: string; 5 | closeAction?: () => void; 6 | } 7 | 8 | const BandeauLineAlert = (props: Props) => { 9 | return ( 10 |
11 |
12 | 20 | 21 | 22 | {props.title} 23 |
24 | 41 |
42 | ); 43 | }; 44 | 45 | export default BandeauLineAlert; 46 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/ClosableLongAlert.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | text: string; 5 | } 6 | 7 | const ClosableLongAlert = (props: Props) => { 8 | return ( 9 |
13 | 21 | 22 | 23 | 24 |

{props.text}

25 | 26 | 38 |
39 | ); 40 | }; 41 | 42 | export default ClosableLongAlert; 43 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/ConfirmationCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Button from '../buttons/Button'; 3 | const ConfirmationCard: FC = () => { 4 | return ( 5 |
6 |
7 |
8 | 16 | 17 | 18 | 19 |

Remove card

20 |

21 | Are you sure you want to delete this card ? 22 |

23 |
24 |
27 |
28 |
29 |
30 | ); 31 | }; 32 | export default ConfirmationCard; 33 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/CookieAlert2.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from '../buttons/Button'; 3 | 4 | const CookieAlert2 = () => { 5 | return ( 6 |
7 |
8 | cookie 9 |
10 | 11 | 12 | We care about your data, and we'd love to use cookies to make your experience better. 13 | 14 | 15 |
16 | 17 | Privacy Policy 18 | 19 |
20 |
22 |
23 |
24 | ); 25 | }; 26 | 27 | export default CookieAlert2; 28 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/InformationCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Button from '../buttons/Button'; 3 | const InformationCard: FC = () => { 4 | return ( 5 |
6 |
7 |
8 | 14 | 15 | 16 |

17 | User 23722873 has been deleted 18 | form database. 19 |

20 |
21 |
23 |
24 |
25 |
26 | ); 27 | }; 28 | export default InformationCard; 29 | -------------------------------------------------------------------------------- /components/kit/components/elements/alert/SimpleAlert.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | type: 'alert' | 'success' | 'danger'; 5 | title: string; 6 | text: string; 7 | } 8 | 9 | const SimpleAlert = (props: Props) => { 10 | let cssClasses = 'bg-yellow-200 border-yellow-600 text-yellow-600'; 11 | if (props.type !== 'alert') { 12 | cssClasses = 13 | props.type === 'success' 14 | ? 'bg-green-200 border-green-600 text-green-600' 15 | : 'bg-red-200 border-red-600 text-red-600'; 16 | } 17 | 18 | return ( 19 |
20 |

{props.title}

21 |

{props.text}

22 |
23 | ); 24 | }; 25 | 26 | export default SimpleAlert; 27 | -------------------------------------------------------------------------------- /components/kit/components/elements/avatars/Avatar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | withBorder?: boolean; 5 | withInfo?: boolean; 6 | img?: string; 7 | size?: 'small' | 'normal' | 'big' | 'monster'; 8 | type?: 'square' | 'rounded' | 'full'; 9 | } 10 | const Avatar = ({ withBorder, size, withInfo, type, img }: Props) => { 11 | let sizeClasses = 'h-16 w-16'; 12 | if (size && size !== 'normal') { 13 | sizeClasses = size === 'small' ? 'h-10 w-10' : 'h-20 w-20'; 14 | if (size === 'monster') { 15 | sizeClasses = 'h-40 w-40'; 16 | } 17 | } 18 | 19 | let roundedClasses = 'rounded-full'; 20 | if (type && type !== 'full') { 21 | roundedClasses = type === 'square' ? '' : 'rounded-lg'; 22 | } 23 | return ( 24 | 25 | profil 32 | {withInfo && ( 33 | 34 | )} 35 | 36 | ); 37 | }; 38 | export default Avatar; 39 | -------------------------------------------------------------------------------- /components/kit/components/elements/avatars/MultipleAvatar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | size?: 'small' | 'normal' | 'big'; 4 | withHoverEffect?: boolean; 5 | } 6 | const MultipleAvatar = ({ size, withHoverEffect }: Props) => { 7 | let sizeClasses = 'h-16 w-16'; 8 | if (size && size !== 'normal') { 9 | sizeClasses = size === 'small' ? 'h-10 w-10' : 'h-20 w-20'; 10 | } 11 | 12 | const effectClasses = withHoverEffect 13 | ? 'hover:scale-150 hover:z-10 transform ease-in-out transition duration-500' 14 | : ''; 15 | 16 | return ( 17 |
18 | 19 | Guy 24 | 25 | 26 | Max 31 | 32 | 33 | Charles 38 | 39 | 40 | Jade 45 | 46 |
47 | ); 48 | }; 49 | export default MultipleAvatar; 50 | -------------------------------------------------------------------------------- /components/kit/components/elements/badges/BadgeList.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Badge from './Badge'; 3 | 4 | const BadgeList: FC = () => { 5 | return ( 6 |
7 | 8 | 15 | 22 |
23 | ); 24 | }; 25 | 26 | export default BadgeList; 27 | -------------------------------------------------------------------------------- /components/kit/components/elements/badges/ClickableBadge.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const ClickableBadge: FC = () => { 3 | return ( 4 | 10 | ); 11 | }; 12 | export default ClickableBadge; 13 | -------------------------------------------------------------------------------- /components/kit/components/elements/badges/ColoredTextAndBadge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | textColor?: string; 5 | backgroundBadgeColor: string; 6 | label: string; 7 | badgeLabel: string; 8 | } 9 | const ColoredTextAndBadge = (props: Props) => { 10 | return ( 11 |
12 | 15 | {props.badgeLabel} 16 | 17 | {props.label} 18 |
19 | ); 20 | }; 21 | export default ColoredTextAndBadge; 22 | -------------------------------------------------------------------------------- /components/kit/components/elements/badges/NotificationBadge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | number: number; 5 | size?: 'small' | 'normal' | 'big'; 6 | } 7 | 8 | const NotificationBadge = (props: Props) => { 9 | let sizeClasses = 'w-8 h-8 text-base'; 10 | if (props.size && props.size !== 'normal') { 11 | sizeClasses = props.size === 'small' ? 'w-6 h-6 text-xs' : 'w-12 h-12 text-base'; 12 | } 13 | return ( 14 | 17 | ); 18 | }; 19 | export default NotificationBadge; 20 | -------------------------------------------------------------------------------- /components/kit/components/elements/badges/NotificationIconBadge.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const NotificationIconBadge: FC = () => { 3 | return ( 4 | 17 | ); 18 | }; 19 | export default NotificationIconBadge; 20 | -------------------------------------------------------------------------------- /components/kit/components/elements/buttons/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | rounded?: boolean; 5 | color?: string; 6 | icon?: JSX.Element; 7 | disabled?: boolean; 8 | submit?: boolean; 9 | isFat?: boolean; 10 | label?: string; 11 | onClick?: () => void; 12 | } 13 | 14 | const colors = { 15 | white: 'bg-white hover:bg-gray-100 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-indigo-500', 16 | gray: 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500 focus:ring-offset-gray-200', 17 | red: 'bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200', 18 | yellow: 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500 focus:ring-offset-yellow-200', 19 | green: 'bg-green-500 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200', 20 | blue: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200', 21 | indigo: 'bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200', 22 | purple: 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200', 23 | pink: 'bg-pink-600 hover:bg-pink-700 focus:ring-pink-500 focus:ring-offset-pink-200', 24 | }; 25 | 26 | const Button = (props: Props) => { 27 | return ( 28 | 44 | ); 45 | }; 46 | export default Button; 47 | -------------------------------------------------------------------------------- /components/kit/components/elements/buttons/ButtonWithIndications.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | indication: string; 6 | onClick?: () => void; 7 | onIndicationClick?: () => void; 8 | } 9 | 10 | const ButtonWithIndications = (props: Props) => { 11 | return ( 12 |
13 | 30 | 31 | 38 |
39 | ); 40 | }; 41 | export default ButtonWithIndications; 42 | -------------------------------------------------------------------------------- /components/kit/components/elements/buttons/MultipleButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | const MultipleButton: FC = () => { 4 | return ( 5 |
6 | 12 | 18 | 24 |
25 | ); 26 | }; 27 | export default MultipleButton; 28 | -------------------------------------------------------------------------------- /components/kit/components/elements/buttons/RoundedButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | icon?: boolean; 5 | label?: string; 6 | onClick?: () => void; 7 | } 8 | 9 | const RoundedButton = (props: Props) => { 10 | return ( 11 | 31 | ); 32 | }; 33 | export default RoundedButton; 34 | -------------------------------------------------------------------------------- /components/kit/components/elements/buttons/SquareButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | color?: string; 5 | icon?: JSX.Element; 6 | isFat?: boolean; 7 | label?: string; 8 | onClick?: () => void; 9 | } 10 | 11 | const colors = { 12 | gray: 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500 focus:ring-offset-gray-200', 13 | red: 'bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200', 14 | yellow: 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500 focus:ring-offset-yellow-200', 15 | green: 'bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200', 16 | blue: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200', 17 | indigo: 'bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200', 18 | purple: 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200', 19 | pink: 'bg-pink-600 hover:bg-pink-700 focus:ring-pink-500 focus:ring-offset-pink-200', 20 | variant: 'bg-gradient-to-r from-green-400 to-blue-500', 21 | }; 22 | 23 | const SquareButton = (props: Props) => { 24 | return ( 25 | 39 | ); 40 | }; 41 | export default SquareButton; 42 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/CovidInfo.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | const CovidInfo: FC = () => { 4 | return ( 5 |
6 |
7 | Total Cases 8 | 75,858,724 9 |
10 |
11 |
12 |

13 | 21 | 22 | 23 | 1.2% increase 24 |

25 |
26 |

27 | from yesterday (+906,503) 28 |

29 |
30 |
31 | ); 32 | }; 33 | 34 | export default CovidInfo; 35 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/InfoNumberCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const InfoNumberCard: FC = () => { 3 | return ( 4 |
5 |
6 | 7 | 15 | 16 | 17 | 18 |

Sales

19 |
20 |
21 |

36K

22 |
23 |
24 |
25 |
26 |
27 | ); 28 | }; 29 | export default InfoNumberCard; 30 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/InfoNumberCard2.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | const InfoNumberCard2: FC = () => { 4 | return ( 5 |
6 | btc logo 11 |
12 |
13 |
Valeur de la transaction
14 |
$ 5,749,480
15 |
16 | 17 | 500.000BTC 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default InfoNumberCard2; 27 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/InformationIconCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const InformationIconCard: FC = () => { 3 | return ( 4 |
5 |
6 |
7 | 15 | 16 | 17 |
18 | 19 |

Justice

20 |

21 | I therefore look forward to further developments in this area so that we can ease the path in 22 | bringing these reckless individuals to justice. 23 |

24 |
25 |
26 | ); 27 | }; 28 | export default InformationIconCard; 29 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/JobCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Avatar from '../avatars/Avatar'; 3 | import Badge from '../badges/Badge'; 4 | import Button from '../buttons/Button'; 5 | 6 | const JobCard = () => { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 | Charlie Rabiller 14 | Updated 3 min ago 15 |
16 |
17 |
18 | Design 19 |
20 |
21 |

22 | Need a designer to form branding for my business. 23 |

24 |

25 | Looking for a talented brand designer to create all the branding materials for my new startup. This 26 | should be a long term project and my hope I hight on the person whom I would like to hire. 27 |

28 |
29 |
30 |

31 | $ 4,500 32 | /Month 33 |

34 | 35 | Full time 36 | 37 |
38 |
39 |
41 | ); 42 | }; 43 | export default JobCard; 44 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/MutlipleTask.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | const MutlipleTask: FC = () => { 4 | return ( 5 |
6 | 7 |
8 |

Task Progress

9 | 10 |
11 |

Design

12 |

3/8

13 |
14 |
15 |
16 |
17 | 18 |
19 |

Development

20 |

6/10

21 |
22 |
23 |
24 |
25 | 26 |
27 |

DevOps

28 |

2/8

29 |
30 |
31 |
32 |
33 | 34 |
35 |

Marketing

36 |

8/8

37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 | ); 45 | }; 46 | 47 | export default MutlipleTask; 48 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/SimpleIconDescCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const SimpleIconDescCard: FC = () => { 3 | return ( 4 |
5 |
6 |
7 | 15 | 16 | 17 |

by express

18 |

Package delivered

19 |

20 | Your package was delivered in 1 day and 4 hours by our postal partner 21 |

22 |
23 |
24 |
25 | ); 26 | }; 27 | export default SimpleIconDescCard; 28 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/SimpleNotificationCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const SimpleNotificationCard: FC = () => { 3 | return ( 4 |
5 |
6 | person 7 |
8 |
9 |

10 | You have 11 | 2 new messages 12 |

13 |
14 |
15 | 23 | 24 | 25 |
26 |
27 | ); 28 | }; 29 | export default SimpleNotificationCard; 30 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/SimplePhotoDescCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | const SimplePhotoDescCard: FC = () => { 4 | return ( 5 |
6 | moto 7 |
8 |

NextJS

9 |

10 | NextJs build all free components and templates for React website. 11 |

12 |
13 |
14 | ); 15 | }; 16 | export default SimplePhotoDescCard; 17 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/SimpleTask.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import Avatar from '../avatars/Avatar'; 3 | 4 | const SimpleTask: FC = () => { 5 | return ( 6 |
7 | 8 |
9 | 10 |
11 | Charlie Rabiller 12 | Tailwind-kit.com 13 |
14 |
15 |
16 |

4/6 task completed

17 |
18 |
19 |
20 |
21 | 22 |
23 | ); 24 | }; 25 | 26 | export default SimpleTask; 27 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/TagsCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | const TagsCard: FC = () => { 3 | return ( 4 |
5 | eggs 6 |
7 | 23 |

Templates

24 |

25 | Improve UI with beautiful templates and components for Tailwind css. 26 |

27 |
28 |
#css
29 |
30 | #tailwind 31 |
32 |
#components
33 |
34 |
35 |
36 | ); 37 | }; 38 | export default TagsCard; 39 | -------------------------------------------------------------------------------- /components/kit/components/elements/data/TaskCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import MultipleAvatar from '../avatars/MultipleAvatar'; 3 | 4 | const TaskCard: FC = () => { 5 | return ( 6 |
7 | 8 |
9 |

10 | Improve css design of the carousel 11 |

12 |

Sunday 13 october

13 |

14 | You’ve been coding for a while now and know your way around a CSS file. You’re certainly no 15 | master, but with enough fiddling you can get where you want to go. 16 |

17 |
18 |

Task progress

19 |

33%

20 |
21 |
22 |
23 |
24 |
25 | 26 | + 4 more 27 |
28 |
29 | 30 |
31 | ); 32 | }; 33 | 34 | export default TaskCard; 35 | -------------------------------------------------------------------------------- /components/kit/components/elements/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import SectionDesc from '../../../site/section/SectionDesc'; 3 | 4 | const Elements: FC = () => { 5 | const elementsSection = [ 6 | { 7 | title: 'Buttons', 8 | items: 22, 9 | img: 'images/sections/button.png', 10 | link: '/components/buttons', 11 | }, 12 | { 13 | title: 'Badges', 14 | items: 15, 15 | img: 'images/sections/badges.png', 16 | link: '/components/badges', 17 | }, 18 | { 19 | title: 'Avatars', 20 | items: 11, 21 | img: 'images/sections/avatar.png', 22 | link: '/components/avatar', 23 | }, 24 | { 25 | title: 'Menu list', 26 | items: 7, 27 | img: 'images/sections/ddm.png', 28 | link: '/components/ddm', 29 | }, 30 | { 31 | title: 'Alerts', 32 | items: 11, 33 | img: 'images/sections/alerte.png', 34 | link: '/components/alert', 35 | }, 36 | { 37 | title: 'Dashboards', 38 | items: 26, 39 | img: 'images/sections/data.png', 40 | link: '/components/data', 41 | }, 42 | { 43 | title: 'Progress bars', 44 | items: 5, 45 | img: 'images/sections/progress.png', 46 | link: '/components/progress', 47 | }, 48 | { 49 | title: 'Skeleton', 50 | items: 3, 51 | img: 'images/sections/skeleton.png', 52 | link: '/components/skeleton', 53 | }, 54 | { 55 | title: 'Tabs', 56 | isNew: true, 57 | items: 3, 58 | img: 'images/sections/tabs.png', 59 | link: '/components/tabs', 60 | }, 61 | ]; 62 | 63 | return ; 64 | }; 65 | 66 | export default Elements; 67 | -------------------------------------------------------------------------------- /components/kit/components/elements/progress/ProgressBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | color?: string; 5 | textColor?: string; 6 | isFat?: boolean; 7 | label?: string; 8 | withBadge?: boolean; 9 | } 10 | 11 | const ProgressBar = (props: Props) => { 12 | return ( 13 |
14 |
15 | {props.withBadge && ( 16 |
17 | 20 | Task in progress 21 | 22 |
23 | )} 24 |
25 |
26 | {props.label} 27 |
28 |
29 |
30 |
31 | ); 32 | }; 33 | export default ProgressBar; 34 | -------------------------------------------------------------------------------- /components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const HorizontalSkeletonCard = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ); 23 | }; 24 | export default HorizontalSkeletonCard; 25 | -------------------------------------------------------------------------------- /components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PictureAndTextSkeleton = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | ); 20 | }; 21 | export default PictureAndTextSkeleton; 22 | -------------------------------------------------------------------------------- /components/kit/components/elements/skeleton/SimpleSkeleton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SimpleSkeleton = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | ); 15 | }; 16 | export default SimpleSkeleton; 17 | -------------------------------------------------------------------------------- /components/kit/components/elements/tabs/BasicTabs.tsx: -------------------------------------------------------------------------------- 1 | export default function BasicTabs() { 2 | return ( 3 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /components/kit/components/elements/tabs/BasicTabsDisabled.tsx: -------------------------------------------------------------------------------- 1 | export default function BasicTabsDisabled() { 2 | return ( 3 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /components/kit/components/elements/tabs/BasicTabsUnderline.tsx: -------------------------------------------------------------------------------- 1 | export default function BasicTabsUnderline() { 2 | return ( 3 |
4 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/kit/components/form/dateTimePicker/TimePicker.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const TimePicker = () => { 4 | return ( 5 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /components/kit/components/form/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import SectionDesc from '../../../site/section/SectionDesc'; 3 | 4 | const Forms: FC = () => { 5 | const formSections = [ 6 | { 7 | title: 'Inputs', 8 | items: 10, 9 | img: 'images/sections/input.png', 10 | link: '/components/inputtext', 11 | }, 12 | { 13 | title: 'Selects', 14 | items: 4, 15 | img: 'images/sections/select.png', 16 | link: '/components/inputselect', 17 | }, 18 | { 19 | title: 'Toggles', 20 | items: 3, 21 | img: 'images/sections/toggle.png', 22 | link: '/components/toggle', 23 | }, 24 | { 25 | title: 'Layouts', 26 | items: 10, 27 | img: 'images/sections/login.png', 28 | link: '/components/form', 29 | }, 30 | ]; 31 | 32 | return ; 33 | }; 34 | 35 | export default Forms; 36 | -------------------------------------------------------------------------------- /components/kit/components/form/inputtext/InputArea.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const InputArea = () => { 4 | return ( 5 |