forked from nsbradford/TalkFormAI
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9d4a099
commit 148b4a6
Showing
13 changed files
with
426 additions
and
227 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| setup: | ||
| project: talk-form-ai | ||
| config: dev | ||
| config: dev |
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 |
|---|---|---|
| @@ -1,55 +1,93 @@ | ||
| import React from 'react'; | ||
| import TeamMember from './TeamMember'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faTwitter, faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons'; | ||
| import { | ||
| faTwitter, | ||
| faLinkedin, | ||
| faGithub, | ||
| } from '@fortawesome/free-brands-svg-icons'; | ||
|
|
||
| interface Props { | ||
| members: TeamMember[]; | ||
| members: TeamMember[]; | ||
| } | ||
|
|
||
| const Team: React.FC<Props> = ({ members }) => { | ||
| return ( | ||
| <div className="container mx-auto p-8"> | ||
| <div className=""> | ||
| {/* <h2 className="text-2xl block text-center font-semibold mb-4">About the Team</h2> */} | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| {members.map((member, index) => ( | ||
| <div key={index} className="p-4 rounded bg-gray-100 rounded-2xl border border-2 border-gray-200"> | ||
| <img src={member.image} alt={member.name} className="w-40 h-40 rounded-full mx-auto mb-4 border border-2 border-gray-400"/> | ||
| <h3 className="block text-center text-xl">{member.name}</h3> | ||
| { | ||
| member.subtitle && ( | ||
| <p className="text-gray-600 text-center">{member.subtitle}</p> | ||
| ) | ||
| } | ||
| { | ||
| member.website && ( | ||
| <a href={'https://' + member.website} className="text-blue-500 hover:underline block text-center">{member.website}</a> | ||
| ) | ||
| } | ||
| <div className="mt-2 space-x-4 text-center"> | ||
| {member.socials.twitter == null ? <></> : ( | ||
| <a href={member.socials.twitter} target="_blank" rel="noopener noreferrer" className="hover:text-blue-500"> | ||
| <FontAwesomeIcon icon={faTwitter} className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out "/> | ||
| </a> | ||
| )} | ||
| {member.socials.linkedIn && ( | ||
| <a href={member.socials.linkedIn} target="_blank" rel="noopener noreferrer" className="hover:text-blue-500"> | ||
| <FontAwesomeIcon icon={faLinkedin} className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out "/> | ||
| </a> | ||
| )} | ||
| {member.socials.github && ( | ||
| <a href={member.socials.github} target="_blank" rel="noopener noreferrer" className="hover:text-blue-500"> | ||
| <FontAwesomeIcon icon={faGithub} className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out "/> | ||
| </a> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| return ( | ||
| <div className="container mx-auto p-8"> | ||
| <div className=""> | ||
| {/* <h2 className="text-2xl block text-center font-semibold mb-4">About the Team</h2> */} | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| {members.map((member, index) => ( | ||
| <div | ||
| key={index} | ||
| className="p-4 rounded bg-gray-100 rounded-2xl border border-2 border-gray-200" | ||
| > | ||
| <img | ||
| src={member.image} | ||
| alt={member.name} | ||
| className="w-40 h-40 rounded-full mx-auto mb-4 border border-2 border-gray-400" | ||
| /> | ||
| <h3 className="block text-center text-xl">{member.name}</h3> | ||
| {member.subtitle && ( | ||
| <p className="text-gray-600 text-center">{member.subtitle}</p> | ||
| )} | ||
| {member.website && ( | ||
| <a | ||
| href={'https://' + member.website} | ||
| className="text-blue-500 hover:underline block text-center" | ||
| > | ||
| {member.website} | ||
| </a> | ||
| )} | ||
| <div className="mt-2 space-x-4 text-center"> | ||
| {member.socials.twitter == null ? ( | ||
| <></> | ||
| ) : ( | ||
| <a | ||
| href={member.socials.twitter} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:text-blue-500" | ||
| > | ||
| <FontAwesomeIcon | ||
| icon={faTwitter} | ||
| className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out " | ||
| /> | ||
| </a> | ||
| )} | ||
| {member.socials.linkedIn && ( | ||
| <a | ||
| href={member.socials.linkedIn} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:text-blue-500" | ||
| > | ||
| <FontAwesomeIcon | ||
| icon={faLinkedin} | ||
| className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out " | ||
| /> | ||
| </a> | ||
| )} | ||
| {member.socials.github && ( | ||
| <a | ||
| href={member.socials.github} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:text-blue-500" | ||
| > | ||
| <FontAwesomeIcon | ||
| icon={faGithub} | ||
| className="fa-fw text-gray-400 px-3 md:px-6 py-3 text-2xl hover:text-indigo-600 transition duration-200 hover:scale-125 ease-in-out " | ||
| /> | ||
| </a> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Team; |
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 |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| interface TeamMember { | ||
| name: string; | ||
| image: string; | ||
| subtitle?: string; | ||
| website?: string; | ||
| socials: { | ||
| twitter?: string; | ||
| linkedIn?: string; | ||
| github?: string; | ||
| }; | ||
| name: string; | ||
| image: string; | ||
| subtitle?: string; | ||
| website?: string; | ||
| socials: { | ||
| twitter?: string; | ||
| linkedIn?: string; | ||
| github?: string; | ||
| }; | ||
| } | ||
|
|
||
| export default TeamMember; |
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,82 @@ | ||
| import { MessageUI } from '../chat'; | ||
| import { sunsetGradient } from '../misc'; | ||
|
|
||
|
|
||
| export function ChatHistory(props: { messages: string[] }) { | ||
| const messages = props.messages.map((message, index) => { | ||
| return ( | ||
| <MessageUI | ||
| key={index} | ||
| role={index % 2 === 0 ? 'assistant' : 'user'} | ||
| content={message} | ||
| /> | ||
| ); | ||
| }); | ||
| return ( | ||
| <FloatingGradientBackground> | ||
| <div className="bg-white p-4 rounded-lg shadow-xl text-xs text-gray-400 text-left"> | ||
| {messages} | ||
| </div> | ||
| </FloatingGradientBackground> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| export function SampleResponseTable() { | ||
| return ( | ||
| <FloatingGradientBackground> | ||
| <table className="text-xs min-w-full bg-white rounded-lg shadow-xl text-sm text-gray-400 border-collapse text-left my-0"> | ||
| <thead> | ||
| <tr className="border-b"> | ||
| <th className="p-1 pl-2 sm:p-2">Name</th> | ||
| <th className="p-1 pl-2 sm:p-2">Email</th> | ||
| <th className="p-1 pl-2 sm:p-2">Company</th> | ||
| <th className="p-1 pl-2 sm:p-2">Title</th> | ||
| <th className="p-1 pl-2 sm:p-2">Tech</th> | ||
| <th className="p-1 hidden sm:table-cell">GitHub</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Jane Doe</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">[email protected]</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Tech Co.</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">ML Engineer</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">React, Node, Python</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b hidden sm:table-cell"> | ||
| jd-70B | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Bill Smith</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">[email protected]</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Biz Corp.</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Marketing Manager</td> | ||
| <td className="p-1 pl-2 sm:p-2 border-b">Google Analytics</td> | ||
| <td className="p-1 border-b hidden sm:table-cell">-</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </FloatingGradientBackground> | ||
| ); | ||
| } | ||
|
|
||
| export function FloatingGradientBackground(props: { | ||
| children: React.ReactNode; | ||
| }) { | ||
| return ( | ||
| <div className={`${sunsetGradient} p-3 md:p-6 rounded-xl shadow-xl`}> | ||
| {props.children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function FloatingTextBox(props: { text: string }) { | ||
| return ( | ||
| <FloatingGradientBackground> | ||
| <div className="bg-white p-4 rounded-lg shadow-xl text-xs text-gray-400 text-left"> | ||
| {props.text} | ||
| </div> | ||
| </FloatingGradientBackground> | ||
| ); | ||
| } |
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
Oops, something went wrong.