diff --git a/examples/to-do-example/src/app/components/Cards.tsx b/examples/to-do-example/src/app/components/Cards.tsx index 6b913523e..a60b11071 100644 --- a/examples/to-do-example/src/app/components/Cards.tsx +++ b/examples/to-do-example/src/app/components/Cards.tsx @@ -66,7 +66,7 @@ export function AccordianTriggerContent({
{contentVariants.icon}
- + {active ? contentVariants.activeHeaderText : contentVariants.inactiveHeaderText} @@ -129,8 +129,8 @@ export function TriggerCard({ const SyncCardVariants = { linearSyncVariant: { icon: , - inactiveHeaderText: "Setup a weekly summary email", - activeHeaderText: "Weekly summary email", + inactiveHeaderText: "Sync Linear issues", + activeHeaderText: "Linear issues are synced", activeBodyReactContent: ( Scheduled for @@ -160,7 +160,10 @@ export function TriggerSyncCard({
{syncVariant.icon}
- + {active ? syncVariant.activeHeaderText : syncVariant.inactiveHeaderText} diff --git a/examples/to-do-example/src/app/components/ToDoRow.tsx b/examples/to-do-example/src/app/components/ToDoRow.tsx index 508ca519c..ad107c6a4 100644 --- a/examples/to-do-example/src/app/components/ToDoRow.tsx +++ b/examples/to-do-example/src/app/components/ToDoRow.tsx @@ -1,28 +1,25 @@ import { cn } from "@/utils/cn"; import { CheckCircleIcon, PlusIcon } from "@heroicons/react/24/solid"; -import { Paragraph } from "./Paragraph"; const baseStyle = - "flex h-16 w-full rounded-md transition hover:cursor-pointer pl-12 font-sans focus:outline-none focus:bg-slate-600 focus:text-slate-200"; + "flex h-16 w-full rounded-md transition hover:cursor-pointer pl-12 font-sans focus:outline-none focus:text-slate-200"; const ToDoRowVariants = { add: { button: - "bg-slate-900 border-slate-600 border-2 hover:border-slate-400 pr-4 ", - text: "text-slate-600 italic", + "bg-slate-900 border-slate-500 border-2 hover:border-slate-400 pr-4 focus:text-slate-200 focus:bg-slate-800", icon: ( - + ), }, active: { - button: "bg-slate-800", - text: "text-slate-100", + button: + "bg-slate-800 text-slate-200 focus:bg-slate-700 focus:text-slate-200 hover:bg-slate-700", icon:
, }, completed: { - button: "bg-slate-900", - text: "text-slate-600", - icon: , + button: "bg-slate-900 text-slate-600", + icon: , }, }; @@ -49,11 +46,11 @@ export function ToDoRow({ variant, className }: ToDoRowProps) { diff --git a/examples/to-do-example/src/app/components/TriggerDotDevLogo.tsx b/examples/to-do-example/src/app/components/TriggerDotDevLogo.tsx new file mode 100644 index 000000000..d7f4f47a5 --- /dev/null +++ b/examples/to-do-example/src/app/components/TriggerDotDevLogo.tsx @@ -0,0 +1,195 @@ +export function TriggerDotDevLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/examples/to-do-example/src/app/page.tsx b/examples/to-do-example/src/app/page.tsx index 26b805222..3677d1610 100644 --- a/examples/to-do-example/src/app/page.tsx +++ b/examples/to-do-example/src/app/page.tsx @@ -1,36 +1,45 @@ +import { BookOpenIcon, CheckCircleIcon } from "@heroicons/react/24/solid"; import { TriggerCard, TriggerSyncCard } from "./components/Cards"; import { Header1, Header2 } from "./components/Header"; import { Paragraph } from "./components/Paragraph"; import { PrimaryGradientText } from "./components/TextStyling"; import { ToDoRow } from "./components/ToDoRow"; +import { TriggerDotDevLogo } from "./components/TriggerDotDevLogo"; // import { ToDoRow } from "./components/ToDoRow"; export default function Home() { return ( -
+
To-do list example project -
- +
+ Powered by +
This project demonstrates some of the key features of Trigger.dev.{" "}
-
- - - trigger.dev/to-do-list-example - - -
+
+ +
View the{" "}
- - View the{" "} - - docs - - . - +
+ + + View the{" "} + + docs + + . + +
- - To-do list - +
+ + To-do list + +
+ +
+
-
+
Trigger.dev jobs diff --git a/examples/to-do-example/tailwind.config.js b/examples/to-do-example/tailwind.config.js index 222583d58..973a0b737 100644 --- a/examples/to-do-example/tailwind.config.js +++ b/examples/to-do-example/tailwind.config.js @@ -67,6 +67,7 @@ module.exports = { }, ], }, + colors: { bright, dimmed, @@ -87,7 +88,9 @@ module.exports = { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + "gradient-primary": `linear-gradient(90deg, acid-500 0%, toxic-500 100%)`, + "gradient-primary-hover": `linear-gradient(80deg, acid-600 0%, toxic-600 100%)`, }, }, - plugins: [], + plugins: [require("tailwindcss-animate")], };