{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"job-detail","type":"registry:ui","title":"JobDetail","description":"A single posting.","package":"job-board","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["format","types"],"files":[{"path":"components\/fancy\/job-detail\/JobDetail.tsx","content":"import { Badge, Button, Callout, Card, Heading, Text } from '@particle-academy\/react-fancy';\r\nimport { formatLocation, formatPay, formatPosted } from '..\/format';\r\nimport type { JobPosting } from '..\/types';\r\n\r\nexport interface JobDetailProps {\r\n    posting: JobPosting;\r\n    \/** Rendered as the primary action. Omit when the viewer cannot apply. *\/\r\n    onApply?: (posting: JobPosting) => void;\r\n    applyLabel?: string;\r\n    \/** Set once the viewer has applied \u2014 replaces the action with a note. *\/\r\n    hasApplied?: boolean;\r\n    \/** Explains why applying is unavailable, e.g. \"Sign in to apply\". *\/\r\n    applyDisabledReason?: string;\r\n    applying?: boolean;\r\n    className?: string;\r\n}\r\n\r\n\/** A single posting in full, with the apply call to action. *\/\r\nexport function JobDetail({\r\n    posting,\r\n    onApply,\r\n    applyLabel = 'Apply now',\r\n    hasApplied = false,\r\n    applyDisabledReason,\r\n    applying = false,\r\n    className,\r\n}: JobDetailProps) {\r\n    const pay = formatPay(posting);\r\n    const location = formatLocation(posting);\r\n    const posted = formatPosted(posting.published_at);\r\n    const closed = !posting.accepts_applications;\r\n\r\n    return (\r\n        <div className={`grid gap-5 ${className ?? ''}`}>\r\n            <Card\r\n                variant=\"outlined\"\r\n                padding=\"lg\"\r\n                className=\"!rounded-xl !border-secondary-200 !bg-white !shadow-sm\"\r\n            >\r\n                <div className=\"flex flex-wrap items-center gap-2\">\r\n                    {posting.employment_type_label && (\r\n                        <Badge color=\"zinc\" variant=\"soft\" size=\"sm\">\r\n                            {posting.employment_type_label}\r\n                        <\/Badge>\r\n                    )}\r\n                    {posting.is_remote && (\r\n                        <Badge color=\"green\" variant=\"soft\" size=\"sm\">\r\n                            Remote\r\n                        <\/Badge>\r\n                    )}\r\n                    {posting.openings > 1 && (\r\n                        <Text size=\"sm\" color=\"muted\">\r\n                            {posting.openings} openings\r\n                        <\/Text>\r\n                    )}\r\n                <\/div>\r\n\r\n                <Heading as=\"h1\" size=\"2xl\" weight=\"bold\" className=\"!mt-3 !text-secondary-900\">\r\n                    {posting.title}\r\n                <\/Heading>\r\n\r\n                {posting.employer?.name && (\r\n                    <Text className=\"!mt-1 !text-secondary-700\">{posting.employer.name}<\/Text>\r\n                )}\r\n\r\n                <div className=\"mt-4 grid gap-1\">\r\n                    {location && <Text className=\"!text-secondary-700\">{location}<\/Text>}\r\n                    {pay && (\r\n                        <Text weight=\"semibold\" className=\"!text-secondary-900\">\r\n                            {pay}\r\n                        <\/Text>\r\n                    )}\r\n                    {posted && (\r\n                        <Text size=\"sm\" color=\"muted\">\r\n                            {posted}\r\n                        <\/Text>\r\n                    )}\r\n                <\/div>\r\n\r\n                <div className=\"mt-6 flex flex-wrap items-center gap-3\">\r\n                    {hasApplied ? (\r\n                        <Badge color=\"green\" variant=\"soft\">\r\n                            You have applied\r\n                        <\/Badge>\r\n                    ) : closed ? (\r\n                        <Badge color=\"red\" variant=\"soft\">\r\n                            No longer accepting applications\r\n                        <\/Badge>\r\n                    ) : onApply ? (\r\n                        <Button\r\n                            type=\"button\"\r\n                            loading={applying}\r\n                            disabled={applying}\r\n                            onClick={() => onApply(posting)}\r\n                            className=\"!bg-brand hover:!bg-primary-600 !text-white !font-semibold !px-6 !py-2.5 !rounded-md !shadow-sm\"\r\n                        >\r\n                            {applyLabel}\r\n                        <\/Button>\r\n                    ) : applyDisabledReason ? (\r\n                        <Text size=\"sm\" color=\"muted\">\r\n                            {applyDisabledReason}\r\n                        <\/Text>\r\n                    ) : null}\r\n\r\n                    {posting.apply_url && (\r\n                        <Button\r\n                            href={posting.apply_url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            variant=\"ghost\"\r\n                            className=\"!text-secondary-700 hover:!text-brand\"\r\n                        >\r\n                            Apply on the employer\u2019s site\r\n                        <\/Button>\r\n                    )}\r\n                <\/div>\r\n            <\/Card>\r\n\r\n            {posting.description && (\r\n                <Card\r\n                    variant=\"outlined\"\r\n                    padding=\"lg\"\r\n                    className=\"!rounded-xl !border-secondary-200 !bg-white !shadow-sm\"\r\n                >\r\n                    <Heading as=\"h2\" size=\"lg\" weight=\"bold\" className=\"!text-secondary-900\">\r\n                        About this role\r\n                    <\/Heading>\r\n                    <Text className=\"!mt-3 !text-secondary-700 whitespace-pre-line\">\r\n                        {posting.description}\r\n                    <\/Text>\r\n                <\/Card>\r\n            )}\r\n\r\n            {posting.requirements && (\r\n                <Card\r\n                    variant=\"outlined\"\r\n                    padding=\"lg\"\r\n                    className=\"!rounded-xl !border-secondary-200 !bg-white !shadow-sm\"\r\n                >\r\n                    <Heading as=\"h2\" size=\"lg\" weight=\"bold\" className=\"!text-secondary-900\">\r\n                        Requirements\r\n                    <\/Heading>\r\n                    <Text className=\"!mt-3 !text-secondary-700 whitespace-pre-line\">\r\n                        {posting.requirements}\r\n                    <\/Text>\r\n                <\/Card>\r\n            )}\r\n\r\n            {(posting.contact_email || posting.contact_phone) && (\r\n                <Callout color=\"zinc\">\r\n                    <Text size=\"sm\">\r\n                        Questions? Contact{' '}\r\n                        {posting.contact_email && (\r\n                            <span className=\"font-semibold\">{posting.contact_email}<\/span>\r\n                        )}\r\n                        {posting.contact_email && posting.contact_phone && ' \u00b7 '}\r\n                        {posting.contact_phone && (\r\n                            <span className=\"font-semibold\">{posting.contact_phone}<\/span>\r\n                        )}\r\n                    <\/Text>\r\n                <\/Callout>\r\n            )}\r\n        <\/div>\r\n    );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/job-detail\/JobDetail.tsx"}]}