github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Added trigger cards wip

Browse Source
This commit is contained in:
D-K-P
2023-06-21 18:05:26 +01:00
parent 7c6440fd9a
commit d21e364f11
6 changed files with 130 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/to-do-example/package.json
+4
View File
@@ -10,10 +10,13 @@
},
"dependencies": {
"@heroicons/react": "^2.0.13",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@types/node": "20.3.1",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"autoprefixer": "10.4.14",
"class-variance-authority": "^0.5.2",
"clsx": "^1.2.1",
"eslint": "^8.24.0",
"eslint-config-next": "13.4.6",
@@ -23,6 +26,7 @@
"react-dom": "^18.2.0",
"tailwind-merge": "^1.12.0",
"tailwindcss": "3.3.2",
"tailwindcss-animate": "^1.0.5",
"typescript": "5.1.3"
}
}
examples/to-do-example/src/app/components/Cards.tsx
+20
View File
@@ -118,3 +118,23 @@ export function TriggerCard({
</Accordion>
);
}
export function TriggerSyncCard({
accordianContentVariant,
active,
children,
}: CardProps) {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="text-left">
<AccordianTriggerContent
accordianContentVariant={accordianContentVariant}
active={active}
/>
</AccordionTrigger>
<AccordionContent>{children}</AccordionContent>
</AccordionItem>
</Accordion>
);
}
examples/to-do-example/src/app/components/Header.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const header3Variants = {
};
const header4Variants = {
"extra-small/medium": "font-title font-medium text-sm pb-1",
"extra-small/medium": "font-title font-semibold text-base pb-1",
"small/semibold":
"font-title sm:font-semibold sm:text-lg text-base font-medium pb-2 sm:leading-tight",
"base/semibold": "font-title font-semibold text-xl pb-2",
examples/to-do-example/src/app/page.tsx
+15 -7
View File
@@ -1,4 +1,4 @@
import { SummaryEmailCard } from "./components/Cards";
import { TriggerCard } from "./components/Cards";
import { Header1, Header2 } from "./components/Header";
import { Paragraph } from "./components/Paragraph";
import { PrimaryGradientText } from "./components/TextStyling";
@@ -65,8 +65,8 @@ export default function Home() {
<ToDoRow variant="completed" />
</div>
</div>
<div className="h-full w-full pt-40 flex flex-col px-8">
<Paragraph variant="small" capitalize>
<div className="h-full w-full pt-40 flex flex-col px-8 gap-4">
<Paragraph variant="small" capitalize removeBottomPadding>
Trigger.dev jobs
</Paragraph>
<div className="flex w-full justify-center items-center">
@@ -81,11 +81,19 @@ export default function Home() {
</Paragraph>
<div className="rounded-full h-px w-full bg-slate-800" />
</div>
<SummaryEmailCard active={false} />
<TriggerCard
active={false}
accordianContentVariant={"summaryEmailCard"}
>
Stuff goes here
</TriggerCard>
<TriggerCard active={false} accordianContentVariant="dailySlackSummary">
Stuff goes here
</TriggerCard>
<TriggerCard active={false} accordianContentVariant="githubIssuesSync">
Stuff goes here
</TriggerCard>
</div>
<form className="mt-8"><div className="bg-neutral-900 w-full border border-neutral-600 rounded-lg focus-within:ring-2 focus-within:ring-current focus-within:outline-none focus-within:border-current focus-within:ring-offset-2 flex overflow-hidden relative z-10"><label for="email" className="sr-only">Email</label><input id="email" type="email" placeholder="hello@example.com" className="bg-inherit placeholder:text-neutral-500 placeholder:font-normal text-neutral-50 p-4 w-full focus-visible:outline-none font-semibold" name="email" value=""><div className="p-2"><button type="submit" className="flex h-full rounded-[4px] items-center w-10 justify-center bg-neutral-50 text-neutral-900"><span className="sr-only">Subscribe</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24"><line x1="4.75" y1="12" x2="19" y2="12"></line><line x1="13.75" y1="6.75" x2="19" y2="12"></line><line x1="19" y1="12" x2="13.75" y2="17.25"></line><g><line x1="3" y1="3" x2="6" y2="12" opacity="0" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0px 1px"></line><line x1="3" y1="21" x2="6" y2="12" opacity="0" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0px 1px"></line></g></svg></button></div></div><p className="mt-2 text-sm">No spam. Unsubscribe anytime.</p></form>
</main>
);
}
examples/to-do-example/tailwind.config.js
+14 -1
View File
@@ -39,6 +39,20 @@ module.exports = {
],
theme: {
extend: {
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
mono: ["Roboto Mono", "monospace"],
@@ -54,7 +68,6 @@ module.exports = {
],
},
colors: {
midnight,
bright,
dimmed,
slate,
pnpm-lock.yaml
Generated
+76
View File
@@ -531,10 +531,13 @@ importers:
examples/to-do-example:
specifiers:
'@heroicons/react': ^2.0.13
'@radix-ui/react-accordion': ^1.1.2
'@radix-ui/react-slot': ^1.0.2
'@types/node': 20.3.1
'@types/react': ^18.0.21
'@types/react-dom': ^18.0.6
autoprefixer: 10.4.14
class-variance-authority: ^0.5.2
clsx: ^1.2.1
eslint: ^8.24.0
eslint-config-next: 13.4.6
@@ -544,13 +547,17 @@ importers:
react-dom: ^18.2.0
tailwind-merge: ^1.12.0
tailwindcss: 3.3.2
tailwindcss-animate: ^1.0.5
typescript: 5.1.3
dependencies:
'@heroicons/react': 2.0.13_react@18.2.0
'@radix-ui/react-accordion': 1.1.2_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-slot': 1.0.2_kzbn2opkn2327fwg5yzwzya5o4
'@types/node': 20.3.1
'@types/react': 18.0.26
'@types/react-dom': 18.0.10
autoprefixer: 10.4.14_postcss@8.4.24
class-variance-authority: 0.5.2_typescript@5.1.3
clsx: 1.2.1
eslint: 8.31.0
eslint-config-next: 13.4.6_s43uvkm2vk3nfxpeso3phtympe
@@ -560,6 +567,7 @@ importers:
react-dom: 18.2.0_react@18.2.0
tailwind-merge: 1.12.0
tailwindcss: 3.3.2
tailwindcss-animate: 1.0.5_tailwindcss@3.3.2
typescript: 5.1.3
integrations/github:
@@ -6599,6 +6607,35 @@ packages:
'@babel/runtime': 7.20.7
dev: false
/@radix-ui/react-accordion/1.1.2_ie75ejlwqy5zh3tldgt7pftwcu:
resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.20.7
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-collapsible': 1.0.3_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-collection': 1.0.3_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-compose-refs': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-context': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-direction': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-id': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-primitive': 1.0.3_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-use-controllable-state': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@types/react': 18.0.26
'@types/react-dom': 18.0.10
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
/@radix-ui/react-alert-dialog/1.0.4_ie75ejlwqy5zh3tldgt7pftwcu:
resolution: {integrity: sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==}
peerDependencies:
@@ -6637,6 +6674,34 @@ packages:
react-dom: 18.2.0_react@18.2.0
dev: false
/@radix-ui/react-collapsible/1.0.3_ie75ejlwqy5zh3tldgt7pftwcu:
resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.20.7
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-context': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-id': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-presence': 1.0.1_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-primitive': 1.0.3_ie75ejlwqy5zh3tldgt7pftwcu
'@radix-ui/react-use-controllable-state': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@radix-ui/react-use-layout-effect': 1.0.1_kzbn2opkn2327fwg5yzwzya5o4
'@types/react': 18.0.26
'@types/react-dom': 18.0.10
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
/@radix-ui/react-collection/1.0.2_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==}
peerDependencies:
@@ -12306,6 +12371,17 @@ packages:
typescript: 4.9.4
dev: false
/class-variance-authority/0.5.2_typescript@5.1.3:
resolution: {integrity: sha512-j7Qqw3NPbs4IpO80gvdACWmVvHiLLo5MECacUBLnJG17CrLpWaQ7/4OaWX6P0IO1j2nvZ7AuSfBS/ImtEUZJGA==}
peerDependencies:
typescript: '>= 4.5.5 < 6'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
typescript: 5.1.3
dev: false
/classnames/2.3.2:
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
dev: false