mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-02-01 20:54:25 +01:00
update: fix errors
This commit is contained in:
MTG2000
@@ -1,17 +0,0 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_CopySignatureCard from './Claim_CopySignatureCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Projects/Claim/Copy Signature Card',
|
||||
component: Claim_CopySignatureCard,
|
||||
|
||||
decorators: [ModalsDecorator]
|
||||
} as ComponentMeta<typeof Claim_CopySignatureCard>;
|
||||
|
||||
const Template: ComponentStory<typeof Claim_CopySignatureCard> = (args) => <Claim_CopySignatureCard {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Direction, replaceModal } from 'src/redux/features/modals.slice';
|
||||
import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
|
||||
import CopyToClipboard from 'src/Components/CopyToClipboard/CopyToClipboard'
|
||||
import { useCallback } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
|
||||
export default function Claim_CopySignatureCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))
|
||||
|
||||
const generatedHash = '0x000330RaaSt302440zxc327jjiaswf19987183345pRReuBNksbaaueee'
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch(replaceModal({
|
||||
Modal: 'Claim_SubmittedCard',
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
variants={modalCardVariants}
|
||||
initial='initial'
|
||||
animate="animate"
|
||||
exit='exit'
|
||||
className="modal-card max-w-[343px] p-24 rounded-xl relative"
|
||||
>
|
||||
<IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
|
||||
<h2 className='text-h5 font-bold'>Claim this project</h2>
|
||||
<div className="flex justify-center my-32">
|
||||
<img
|
||||
src={image}
|
||||
className='w-80 h-80 object-cover rounded-2xl'
|
||||
alt="" />
|
||||
</div>
|
||||
<p className="text-body4 text-center px-16">
|
||||
Good job! Now paste this on the webpage
|
||||
<a className="font-bold" href="www.projectname.com/"
|
||||
target='_blank' rel='noreferrer'
|
||||
> www.projectname.com/</a>
|
||||
</p>
|
||||
<div className="input-wrapper mt-32">
|
||||
<input
|
||||
className="input-text overflow-ellipsis"
|
||||
type='text'
|
||||
value={generatedHash}
|
||||
/>
|
||||
|
||||
<CopyToClipboard text={generatedHash} />
|
||||
</div>
|
||||
<div className="mt-32">
|
||||
<button className='btn btn-primary w-full' onClick={handleNext}>Submit for review</button>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_FundWithdrawCard from './Claim_FundWithdrawCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Projects/Claim/Fund Withdraw Card',
|
||||
component: Claim_FundWithdrawCard,
|
||||
|
||||
decorators: [ModalsDecorator]
|
||||
} as ComponentMeta<typeof Claim_FundWithdrawCard>;
|
||||
|
||||
const Template: ComponentStory<typeof Claim_FundWithdrawCard> = (args) => <Claim_FundWithdrawCard {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
// import { useAppDispatch } from '../../utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
|
||||
|
||||
export default function Claim_FundWithdrawCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
//const dispatch = useAppDispatch();
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
variants={modalCardVariants}
|
||||
initial='initial'
|
||||
animate="animate"
|
||||
exit='exit'
|
||||
className="modal-card max-w-[260px] py-16 px-24 rounded-xl relative"
|
||||
>
|
||||
<div className="flex justify-center my-16">
|
||||
<img
|
||||
src={'assets/icons/lightning-small.svg'}
|
||||
className='w-48 h-48 object-cover rounded-full'
|
||||
alt="" />
|
||||
</div>
|
||||
<p className="text-h4 text-center font-bold">
|
||||
2,220 sats
|
||||
</p>
|
||||
<p className="text-body4 text-center text-gray-400">
|
||||
2.78$
|
||||
</p>
|
||||
<div className="mt-16 flex flex-col gap-8">
|
||||
<button className='btn btn-primary w-full shadow-xs' >Fund</button>
|
||||
<button className='btn border w-full shadow-xs' >Withdraw</button>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Projects/Claim/Generate Signature Card',
|
||||
component: Claim_GenerateSignatureCard,
|
||||
decorators: [ModalsDecorator]
|
||||
} as ComponentMeta<typeof Claim_GenerateSignatureCard>;
|
||||
|
||||
const Template: ComponentStory<typeof Claim_GenerateSignatureCard> = (args) => <Claim_GenerateSignatureCard {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Direction, replaceModal } from 'src/redux/features/modals.slice';
|
||||
import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
|
||||
export default function Claim_GenerateSignatureCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))
|
||||
|
||||
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch(replaceModal({
|
||||
Modal: 'Claim_CopySignatureCard',
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// const timeout = setTimeout(handleNext, 3000)
|
||||
// return () => clearTimeout(timeout)
|
||||
}, [handleNext])
|
||||
|
||||
//const onCopy = () => {
|
||||
// // Copy to Clipboard
|
||||
// setTimeout(handleNext, 2000)
|
||||
//}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
variants={modalCardVariants}
|
||||
initial='initial'
|
||||
animate="animate"
|
||||
exit='exit'
|
||||
className="modal-card max-w-[343px] p-24 rounded-xl relative"
|
||||
>
|
||||
<IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
|
||||
<h2 className='text-h5 font-bold'>Claim this project</h2>
|
||||
<div className="flex justify-center my-32">
|
||||
<img
|
||||
src={image}
|
||||
className='w-80 h-80 object-cover rounded-2xl'
|
||||
alt="" />
|
||||
</div>
|
||||
<p className="text-body4 text-center px-16">
|
||||
To claim ownership of <span className="font-bold">{projectName}</span> and its tips, you need to sign a message and paste this on the project website so we can verify you are the real ownership
|
||||
</p>
|
||||
<div className="mt-32">
|
||||
<button className='btn btn-primary w-full' onClick={handleNext}>Generate Signature</button>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_SubmittedCard from './Claim_SubmittedCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Projects/Claim/Submitted Card',
|
||||
component: Claim_SubmittedCard,
|
||||
|
||||
decorators: [ModalsDecorator]
|
||||
} as ComponentMeta<typeof Claim_SubmittedCard>;
|
||||
|
||||
const Template: ComponentStory<typeof Claim_SubmittedCard> = (args) => <Claim_SubmittedCard {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
|
||||
export default function Claim_SubmittedCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
variants={modalCardVariants}
|
||||
initial='initial'
|
||||
animate="animate"
|
||||
exit='exit'
|
||||
className="modal-card max-w-[343px] p-24 rounded-xl relative"
|
||||
|
||||
>
|
||||
<IoClose
|
||||
className='absolute text-body2 top-24 right-24 hover:cursor-pointer'
|
||||
onClick={onClose} />
|
||||
|
||||
<h2 className='text-h5 font-bold'>Submitted For Review</h2>
|
||||
<div className="flex justify-center my-32">
|
||||
<img
|
||||
src="assets/icons/flag-icon.svg"
|
||||
className='w-80 h-80'
|
||||
alt="success" />
|
||||
</div>
|
||||
<p className="text-body4 text-center">
|
||||
Great work! your claim to <span className="font-bold">Application Name</span> has been submitted for review.
|
||||
<br />
|
||||
Check back soon to see if it was successful.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
import { lazyModal } from "src/utils/helperFunctions";
|
||||
|
||||
export const { LazyComponent: Claim_CopySignatureCard } = lazyModal(() => import('./Claim_CopySignatureCard'))
|
||||
export const { LazyComponent: Claim_FundWithdrawCard } = lazyModal(() => import('./Claim_FundWithdrawCard'))
|
||||
export const { LazyComponent: Claim_GenerateSignatureCard } = lazyModal(() => import('./Claim_GenerateSignatureCard'))
|
||||
export const { LazyComponent: Claim_SubmittedCard } = lazyModal(() => import('./Claim_SubmittedCard'))
|
||||
@@ -1,130 +0,0 @@
|
||||
import linkifyHtml from 'linkifyjs/lib/linkify-html'
|
||||
import { useState } from 'react'
|
||||
import { MdLocalFireDepartment } from 'react-icons/md'
|
||||
import Button from 'src/Components/Button/Button'
|
||||
import Card from 'src/Components/Card/Card'
|
||||
import Lightbox from 'src/Components/Lightbox/Lightbox'
|
||||
import { ProjectDetailsQuery, ProjectLaunchStatusEnum, ProjectPermissionEnum, } from 'src/graphql'
|
||||
import { openModal } from 'src/redux/features/modals.slice'
|
||||
import { setVoteAmount } from 'src/redux/features/vote.slice'
|
||||
import { numberFormatter } from 'src/utils/helperFunctions'
|
||||
import { useAppDispatch } from 'src/utils/hooks'
|
||||
import { createRoute } from 'src/utils/routing'
|
||||
import LinksCard from '../LinksCard/LinksCard'
|
||||
|
||||
interface Props {
|
||||
project: Pick<ProjectDetailsQuery['getProject'],
|
||||
| "id"
|
||||
| "cover_image"
|
||||
| "thumbnail_image"
|
||||
| "title"
|
||||
| "category"
|
||||
| "permissions"
|
||||
| "launch_status"
|
||||
| "description"
|
||||
| "screenshots"
|
||||
| "tagline"
|
||||
| "website"
|
||||
| "votes_count"
|
||||
| 'discord'
|
||||
| 'website'
|
||||
| 'github'
|
||||
| 'twitter'
|
||||
| 'slack'
|
||||
| 'telegram'
|
||||
>
|
||||
}
|
||||
|
||||
|
||||
export default function AboutCard({ project }: Props) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [screenshotsOpen, setScreenshotsOpen] = useState(-1);
|
||||
|
||||
const onVote = (votes?: number) => {
|
||||
dispatch(setVoteAmount(votes ?? 10));
|
||||
dispatch(openModal({
|
||||
Modal: 'VoteCard', props: {
|
||||
projectId: project.id,
|
||||
title: project.title,
|
||||
initVotes: votes
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
const canEdit = project.permissions.includes(ProjectPermissionEnum.UpdateInfo);
|
||||
|
||||
return (
|
||||
<Card defaultPadding={false} onlyMd>
|
||||
{/* Cover Image */}
|
||||
<div className="hidden md:block relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
|
||||
<img className="w-full h-full object-cover rounded-12 md:rounded-0 md:rounded-t-16" src={project.cover_image} alt="" />
|
||||
<div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
|
||||
{project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
|
||||
{project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
|
||||
</div>
|
||||
<div className="absolute left-24 bottom-0 translate-y-1/2 w-[108px] aspect-square">
|
||||
<img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:p-24 md:pt-0 flex flex-col gap-24">
|
||||
{/* Title & Basic Info */}
|
||||
<div className="flex flex-col gap-24 relative">
|
||||
<div className="flex flex-wrap justify-end items-center gap-16 min-h-[40px] mt-12">
|
||||
{canEdit && <Button size="sm" color="gray" href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>}
|
||||
<Button size="sm" variant='outline' color='gray' className='hidden md:block hover:!text-red-500 hover:!border-red-200 hover:!bg-red-50' onClick={() => onVote()}>
|
||||
<MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex flex-col gap-8 items-start justify-between -mt-12'>
|
||||
<a href={project.website} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project.title}</h3></a>
|
||||
<p className="text-body4 text-gray-600">{project.tagline}</p>
|
||||
<div>
|
||||
<span className="font-medium text-body5 text-gray-900">{project.category.icon} {project.category.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" fullWidth variant='outline' color='gray' className='md:hidden hover:!text-red-500 hover:!border-red-200 hover:!bg-red-50' onClick={() => onVote()}>
|
||||
<MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<LinksCard links={project} />
|
||||
</div>
|
||||
|
||||
{/* About */}
|
||||
<div>
|
||||
<div className="text-body4 text-gray-600 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
|
||||
__html: linkifyHtml(project.description, {
|
||||
className: ' text-blue-500 underline',
|
||||
defaultProtocol: 'https',
|
||||
target: "_blank",
|
||||
rel: 'noreferrer'
|
||||
})
|
||||
}}></div>
|
||||
|
||||
</div>
|
||||
{project.screenshots.length > 0 && <>
|
||||
<div className="">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
|
||||
{project.screenshots.slice(0, 4).map((screenshot, idx) => <div
|
||||
key={idx}
|
||||
className="w-full relative pt-[56%] cursor-pointer bg-gray-100 border rounded-10 overflow-hidden"
|
||||
onClick={() => setScreenshotsOpen(idx)}
|
||||
>
|
||||
<img src={screenshot} className="absolute top-0 left-0 w-full h-full object-cover" alt='' />
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
<Lightbox
|
||||
images={project.screenshots}
|
||||
isOpen={screenshotsOpen !== -1}
|
||||
initOpenIndex={screenshotsOpen}
|
||||
onClose={() => setScreenshotsOpen(-1)}
|
||||
/>
|
||||
</>}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from 'react'
|
||||
import Badge from 'src/Components/Badge/Badge'
|
||||
import Card from 'src/Components/Card/Card'
|
||||
import { ProjectDetailsQuery } from 'src/graphql'
|
||||
|
||||
|
||||
interface Props {
|
||||
capabilities: ProjectDetailsQuery['getProject']['capabilities']
|
||||
}
|
||||
|
||||
|
||||
export default function CapabilitiesCard({ capabilities }: Props) {
|
||||
return (
|
||||
<Card onlyMd>
|
||||
<p className="text-body6 max-md:uppercase max-md:text-gray-400 md:text-body2 font-bold">🦾 Capabilities</p>
|
||||
<div className="mt-16">
|
||||
{capabilities.length === 0 && <>
|
||||
<p className="text-gray-700 text-body4">No capabilities added</p>
|
||||
</>}
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import Card from 'src/Components/Card/Card'
|
||||
import { Project } from 'src/graphql'
|
||||
import { FaDiscord, } from 'react-icons/fa';
|
||||
import { FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { NotificationsService, } from 'src/services'
|
||||
|
||||
interface Props {
|
||||
links: Pick<Project, 'discord' | 'website' | 'github' | 'twitter' | 'slack' | 'telegram'>
|
||||
}
|
||||
|
||||
export default function LinksCard({ links }: Props) {
|
||||
const linksList = [
|
||||
{
|
||||
value: links.discord,
|
||||
text: links.discord,
|
||||
icon: FaDiscord,
|
||||
colors: "bg-violet-100 text-violet-900",
|
||||
},
|
||||
{
|
||||
value: links.website,
|
||||
text: links.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
|
||||
icon: FiGlobe,
|
||||
colors: "bg-gray-100 text-gray-900",
|
||||
url: links.website
|
||||
},
|
||||
{
|
||||
value: links.twitter,
|
||||
text: links.twitter,
|
||||
icon: FiTwitter,
|
||||
colors: "bg-blue-100 text-blue-500",
|
||||
url: links.twitter
|
||||
},
|
||||
{
|
||||
value: links.github,
|
||||
text: links.github,
|
||||
icon: FiGithub,
|
||||
colors: "bg-pink-100 text-pink-600",
|
||||
url: links.github
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card onlyMd>
|
||||
<p className="text-body2 font-bold mb-16 hidden md:block">🔗 Links</p>
|
||||
<div className="">
|
||||
{linksList.length === 0 && <>
|
||||
<p className="text-gray-700 text-body4">No links added</p>
|
||||
</>}
|
||||
<div className="flex flex-wrap gap-16">
|
||||
{linksList.filter(link => !!link.value).map((link, idx) =>
|
||||
(link.url ? <a
|
||||
key={idx}
|
||||
href={link.url!}
|
||||
className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
|
||||
target='_blank'
|
||||
rel="noreferrer">
|
||||
<link.icon className="scale-125" />
|
||||
</a>
|
||||
:
|
||||
<CopyToClipboard
|
||||
text={link.value!}
|
||||
onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
|
||||
>
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => { }}
|
||||
className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
|
||||
>
|
||||
<link.icon className="scale-125" />
|
||||
</button>
|
||||
</CopyToClipboard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import Badge from 'src/Components/Badge/Badge'
|
||||
import Card from 'src/Components/Card/Card'
|
||||
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
|
||||
import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions'
|
||||
import { ProjectDetailsQuery } from 'src/graphql'
|
||||
import { createRoute } from 'src/utils/routing'
|
||||
|
||||
|
||||
interface Props {
|
||||
members: ProjectDetailsQuery['getProject']['members']
|
||||
recruit_roles: ProjectDetailsQuery['getProject']['recruit_roles']
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default function MakersCard({ members, recruit_roles }: Props) {
|
||||
return (
|
||||
<Card onlyMd>
|
||||
<p className="text-body6 max-md:uppercase max-md:text-gray-400 md:text-body2 font-bold">👾 Makers</p>
|
||||
<div className="mt-16">
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{members.length === 0 && <p className="text-body4 text-gray-500">Not listed</p>}
|
||||
{sortMembersByRole(members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
|
||||
<Avatar
|
||||
width={40}
|
||||
src={m.user.avatar}
|
||||
renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
|
||||
<Avatar width={48} src={m.user.avatar} />
|
||||
<div className='overflow-hidden'>
|
||||
<p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>
|
||||
<p className={`text-body6 text-gray-600`}>{m.user.jobTitle}</p>
|
||||
</div>
|
||||
</div>}
|
||||
/>
|
||||
</Link>)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-body6 uppercase font-medium text-gray-400 mt-24">Open roles</p>
|
||||
<div className="mt-8">
|
||||
{recruit_roles.length === 0 && <>
|
||||
<p className="text-gray-700 text-body4">No open roles for now</p>
|
||||
</>}
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import Badge from 'src/Components/Badge/Badge'
|
||||
import Card from 'src/Components/Card/Card'
|
||||
import { ProjectDetailsQuery } from 'src/graphql'
|
||||
|
||||
|
||||
interface Props {
|
||||
recruit_roles: ProjectDetailsQuery['getProject']['recruit_roles']
|
||||
}
|
||||
|
||||
|
||||
export default function OpenRolesCard({ recruit_roles }: Props) {
|
||||
return (
|
||||
<Card onlyMd>
|
||||
<p className="text-body2 font-bold">👀 Open roles</p>
|
||||
<div className="mt-16">
|
||||
{recruit_roles.length === 0 && <>
|
||||
<p className="text-gray-700 text-body4">No open roles for now</p>
|
||||
</>}
|
||||
<div className="flex flex-wrap gap-16">
|
||||
{recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -13,8 +13,8 @@ const Template: ComponentStory<typeof ProjectDetailsCard> = (args) => <ProjectDe
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
projectId: 1,
|
||||
isPageModal: true
|
||||
// projectId: 1,
|
||||
// isPageModal: true
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import { setProject } from 'src/redux/features/project.slice';
|
||||
import Button from 'src/Components/Button/Button';
|
||||
import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
|
||||
import { NotificationsService, Wallet_Service } from 'src/services'
|
||||
import { ProjectLaunchStatusEnum, ProjectPermissionEnum, useProjectDetailsQuery } from 'src/graphql';
|
||||
import { useProjectDetailsQuery } from 'src/graphql';
|
||||
import Lightbox from 'src/Components/Lightbox/Lightbox'
|
||||
import linkifyHtml from 'linkify-html';
|
||||
import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
|
||||
@@ -78,55 +78,44 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
|
||||
|
||||
const links = [
|
||||
{
|
||||
value: project.discord,
|
||||
text: project.discord,
|
||||
value: project?.discord,
|
||||
text: project?.discord,
|
||||
icon: FaDiscord,
|
||||
colors: "bg-violet-100 text-violet-900",
|
||||
},
|
||||
{
|
||||
value: project.website,
|
||||
text: project.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
|
||||
value: project?.website,
|
||||
text: project?.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
|
||||
icon: FiGlobe,
|
||||
colors: "bg-gray-100 text-gray-900",
|
||||
url: project.website
|
||||
url: project?.website
|
||||
},
|
||||
{
|
||||
value: project.twitter,
|
||||
text: project.twitter,
|
||||
value: project?.twitter,
|
||||
text: project?.twitter,
|
||||
icon: FiTwitter,
|
||||
colors: "bg-blue-100 text-blue-500",
|
||||
url: project.twitter
|
||||
url: project?.twitter
|
||||
},
|
||||
{
|
||||
value: project.repository,
|
||||
text: project.repository,
|
||||
value: project?.repository,
|
||||
text: project?.repository,
|
||||
icon: FiGithub,
|
||||
colors: "bg-pink-100 text-pink-600",
|
||||
url: project.repository
|
||||
url: project?.repository
|
||||
},
|
||||
];
|
||||
|
||||
const onVote = (votes?: number) => {
|
||||
dispatch(setVoteAmount(votes ?? 10));
|
||||
// dispatch(openModal({
|
||||
// Modal: 'VoteCard', props: {
|
||||
// projectId: project.id,
|
||||
// title: project.title,
|
||||
// initVotes: votes
|
||||
// }
|
||||
// }))
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`modal-card max-w-[676px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
|
||||
>
|
||||
{/* Cover Image */}
|
||||
<div className="relative h-[120px] lg:h-[80px]">
|
||||
<img className="w-full h-full object-cover" src={project.cover_image} alt="" />
|
||||
{/* <img className="w-full h-full object-cover" src={project?.cover_image} alt="" /> */}
|
||||
<div className="absolute w-full px-16 md:px-24 top-16 md:top-24 flex justify-between items-center">
|
||||
<div className="flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
|
||||
{project.yearFounded != "" && `YEAR_FOUNDED_PLACEHOLDER`}
|
||||
{project?.yearFounded && `Year founded ${project.yearFounded}`}
|
||||
</div>
|
||||
<div className="flex gap-8">
|
||||
<button className="w-32 h-32 bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
|
||||
@@ -141,9 +130,9 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
|
||||
<img className="w-full h-full border-2 border-white rounded-24" src={project?.logo?.[0]['thumbnails']['large'].url} alt="" />
|
||||
</div>
|
||||
<div className='flex flex-col gap-8 items-start justify-between'>
|
||||
<a href={project.website} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project.title}</h3></a>
|
||||
<a href={project?.website!} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project?.title}</h3></a>
|
||||
<div>
|
||||
<span className="font-medium text-body4 text-gray-600">{project.category}</span>
|
||||
<span className="font-medium text-body4 text-gray-600">{project?.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,14 +141,9 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
|
||||
{/* About */}
|
||||
<div>
|
||||
<p className="text-body6 uppercase font-medium text-gray-400 mb-8">About</p>
|
||||
<div className=" text-body4 text-gray-600 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
|
||||
__html: linkifyHtml(project.description, {
|
||||
className: ' text-blue-500 underline',
|
||||
defaultProtocol: 'https',
|
||||
target: "_blank",
|
||||
rel: 'noreferrer'
|
||||
})
|
||||
}}></div>
|
||||
<div className=" text-body4 text-gray-600 leading-normal whitespace-pre-line">
|
||||
{project?.description}
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="mt-16 flex flex-wrap gap-16">
|
||||
@@ -189,11 +173,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*project.capabilities.length > 0 &&
|
||||
{/*project?.capabilities.length > 0 &&
|
||||
<div>
|
||||
<p className="text-body6 uppercase font-medium text-gray-400 mb-8">CAPABILITIES</p>
|
||||
<div className="flex flex-wrap gap-8">
|
||||
{project.capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
|
||||
{project?.capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
@@ -203,7 +187,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
|
||||
color='gray'
|
||||
size='md'
|
||||
className="my-16"
|
||||
href={`https://airtable.com/shr67F20KG9Gdok6d?prefill_app_name=${project.title}&prefill_app_link=${project.website}`}
|
||||
href={`https://airtable.com/shr67F20KG9Gdok6d?prefill_app_name=${project?.title}&prefill_app_link=${project?.website}`}
|
||||
newTab
|
||||
// onClick={onClaim}
|
||||
>Request Edit 📝</Button>
|
||||
|
||||
Reference in New Issue
Block a user