forked from mantinedev/next-app-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request mantinedev#13 from widgeter/new-components
Improve About us page
- Loading branch information
Showing
13 changed files
with
630 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import Image from 'next/image'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
| import { Team } from '~/shared/types'; | ||
|
|
||
| const ItemTeam = ({ | ||
| name, | ||
| occupation, | ||
| image, | ||
| items, | ||
| containerClass, | ||
| imageClass, | ||
| panelClass, | ||
| nameClass, | ||
| occupationClass, | ||
| itemsClass, | ||
| }: Team) => { | ||
| return ( | ||
| <div className={twMerge('', containerClass)}> | ||
| <Image src={image.src} width={240} height={320} alt={image.alt} className={twMerge('', imageClass)} /> | ||
| <div className={twMerge('', panelClass)}> | ||
| <h3 className={twMerge('', nameClass)}>{name}</h3> | ||
| <p className={twMerge('', occupationClass)}>{occupation}</p> | ||
| <ul className={twMerge('', itemsClass)}> | ||
| {items && | ||
| items.map( | ||
| ({ title, href, icon: Icon }, index2) => | ||
| Icon && | ||
| href && ( | ||
| <li | ||
| key={`team-${index2}`} | ||
| className="m-1 flex items-center justify-center rounded text-primary-700 hover:text-gray-500" | ||
| > | ||
| <a | ||
| href={href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| aria-label={title as string} | ||
| className="flex items-center justify-center rounded-sm bg-transparent p-0.5 text-primary-900 hover:bg-primary-900 hover:text-slate-200 hover:dark:bg-slate-800 hover:dark:text-slate-200" | ||
| > | ||
| <Icon className="h-6 w-6 p-0.5" /> | ||
| </a> | ||
| </li> | ||
| ), | ||
| )} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ItemTeam; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { twMerge } from 'tailwind-merge'; | ||
| import { Timeline } from '~/shared/types'; | ||
|
|
||
| const Timeline = ({ | ||
| id, | ||
| items, | ||
| defaultIcon: DefaultIcon, | ||
| containerClass, | ||
| panelClass, | ||
| iconClass, | ||
| titleClass, | ||
| descriptionClass, | ||
| }: Timeline) => { | ||
| return ( | ||
| <> | ||
| {items && items.length && ( | ||
| <div className={twMerge('', containerClass)}> | ||
| {items.map(({ title, description, icon: Icon }, index = 0) => ( | ||
| <div key={id ? `item-${id}-${index}` : `item-grid-${index}`} className={twMerge('flex', panelClass)}> | ||
| <div className="flex flex-col items-center mr-4 rtl:mr-0 rtl:ml-4"> | ||
| <div | ||
| className={`flex items-center justify-center ${ | ||
| index !== items.length - 1 ? '' : 'text-slate-200 rounded-full bg-primary-900' | ||
| }`} | ||
| > | ||
| {Icon ? ( | ||
| <Icon className={twMerge('w-10 h-10 p-2 rounded-full border-2', iconClass)} /> | ||
| ) : DefaultIcon ? ( | ||
| <DefaultIcon className={twMerge('w-10 h-10 p-2 rounded-full border-2', iconClass)} /> | ||
| ) : null} | ||
| </div> | ||
|
|
||
| {index !== items.length - 1 && <div className="w-px h-full bg-black/10 dark:bg-slate-400/50" />} | ||
| </div> | ||
| <div className={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}> | ||
| {title && ( | ||
| <h3 className={twMerge('text-xl font-bold text-gray-900 dark:text-slate-300 mb-2', titleClass)}> | ||
| {title} | ||
| </h3> | ||
| )} | ||
| {description && ( | ||
| <p className={twMerge('text-gray-600 dark:text-slate-400', descriptionClass)}>{description}</p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Timeline; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import Headline from '../common/Headline'; | ||
| import { TeamProps } from '~/shared/types'; | ||
| import WidgetWrapper from '../common/WidgetWrapper'; | ||
| import ItemTeam from '../common/ItemTeam'; | ||
|
|
||
| const Team = ({ header, teams, id, isDark = false }: TeamProps) => ( | ||
| <WidgetWrapper id={id ? id : ''} isDark={isDark} containerClass=""> | ||
| {header && <Headline header={header} titleClass="text-2xl sm:text-3xl" />} | ||
| <div className="flex items-stretch justify-center"> | ||
| <div className="grid grid-cols-1 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4"> | ||
| {teams.map(({ name, occupation, image, items }, index) => ( | ||
| <div key={`item-team-two-${index}`} className="p-2"> | ||
| <ItemTeam | ||
| name={name} | ||
| occupation={occupation} | ||
| image={image} | ||
| items={items} | ||
| containerClass="card flex flex-col justify-center w-full px-8 my-12 text-center" | ||
| imageClass="self-center flex-shrink-0 w-36 h-36 -mt-20 bg-center bg-cover rounded-full dark:bg-gray-500 ring-4 ring-gray-300 object-cover" | ||
| panelClass="flex-1 mt-6" | ||
| nameClass="text-base font-semibold text-dark" | ||
| occupationClass="text-sm text-body-color" | ||
| itemsClass="flex justify-center relative px-3 pt-5 mx-5 overflow-hidden" | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </WidgetWrapper> | ||
| ); | ||
|
|
||
| export default Team; |
Oops, something went wrong.