Added Trigger sync card and made lots of general improvements

examples/to-do-example/package.json

@@ -12,6 +12,7 @@
     "@heroicons/react": "^2.0.13",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@trigger.dev/companyicons": "^1.5.8",
     "@types/node": "20.3.1",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",

examples/to-do-example/src/app/components/Cards.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Accordion,
   AccordionItem,
@@ -6,11 +8,13 @@ import {
 } from "./ui/accordion";
 import { Paragraph } from "./Paragraph";
 import { Header4 } from "./Header";
+import { CheckCircleIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
 import {
-  BellAlertIcon,
-  EnvelopeIcon,
-  MapIcon,
-} from "@heroicons/react/24/solid";
+  SlackIcon,
+  GitHubLightIcon,
+  LinearLightIcon,
+} from "@trigger.dev/companyicons";
+import { Content } from "next/font/google";
 
 const accordianContentVariants = {
   summaryEmailCard: {
@@ -19,23 +23,27 @@ const accordianContentVariants = {
     inactiveBodyText:
       "Enter your email and pick any time of the week to get a summary sent straight to your inbox.",
     activeHeaderText: "Weekly summary email",
-    activeBodyText: "Scheduled for",
+    activeBodyReactContent: (
+      <Paragraph removeBottomPadding variant="small" className="text-semibold">
+        Scheduled for
+      </Paragraph>
+    ),
   },
   dailySlackSummary: {
-    icon: <MapIcon className="text-yellow-500" />,
+    icon: <SlackIcon className="text-yellow-500" />,
     inactiveHeaderText: "Post a daily summary to Slack",
     inactiveBodyText:
       "Connect to Slack and send a daily summary to any public channel.",
     activeHeaderText: "Daily Slack summary",
-    activeBodyText: "Scheduled for",
+    activeBodyReactContent: "Scheduled for",
   },
   githubIssuesSync: {
-    icon: <BellAlertIcon className="text-red-500" />,
+    icon: <GitHubLightIcon className="text-red-500" />,
     inactiveHeaderText: "Sync GitHub issues",
     inactiveBodyText:
       "Connect to Github, select a repo and sync open GitHub issues to this list.",
     activeHeaderText: "GitHub issues are synced",
-    activeBodyText: "Synced using the GitHub webhook",
+    activeBodyReactContent: "Synced using the GitHub webhook",
   },
 };
 
@@ -44,50 +52,45 @@ type AccordianTriggerProps = {
   accordianContentVariant: keyof typeof accordianContentVariants;
   id?: string;
   active: boolean;
+  scheduledTime: string;
 };
 
 export function AccordianTriggerContent({
   active,
   accordianContentVariant,
+  scheduledTime,
 }: AccordianTriggerProps) {
+  const contentVariants = accordianContentVariants[accordianContentVariant];
   return (
     <div>
       <div className="flex gap-2">
-        <div className="w-6 h-6">
-          {accordianContentVariants[accordianContentVariant].icon}
-        </div>
+        <div className="w-6 h-6">{contentVariants.icon}</div>
         <div className="w-11/12">
           {" "}
           <Header4 variant={"extra-small/medium"}>
-            {active ? (
-              <>
-                {
-                  accordianContentVariants[accordianContentVariant]
-                    .activeHeaderText
-                }
-              </>
-            ) : (
-              <>
-                {
-                  accordianContentVariants[accordianContentVariant]
-                    .inactiveHeaderText
-                }
-              </>
-            )}
+            {active
+              ? contentVariants.activeHeaderText
+              : contentVariants.inactiveHeaderText}
           </Header4>
         </div>
       </div>
-      <Paragraph variant="small">
-        {active ? (
-          <>
-            {accordianContentVariants[accordianContentVariant].activeBodyText}
-          </>
-        ) : (
-          <>
-            {accordianContentVariants[accordianContentVariant].inactiveBodyText}
-          </>
-        )}
-      </Paragraph>
+      {active ? (
+        <>
+          <div className="flex gap-1 items-center">
+            <CheckCircleIcon className="text-green-500 h-3 w-3" />
+            contentVariants.activeBodyReactContent
+            <Paragraph
+              variant="small"
+              className="font-bold text-slate-300"
+              removeBottomPadding
+            >
+              {scheduledTime}
+            </Paragraph>
+          </div>
+        </>
+      ) : (
+        <Paragraph variant="small">contentVariants.inactiveBodyText</Paragraph>
+      )}
     </div>
   );
 }
@@ -97,12 +100,14 @@ type CardProps = {
   children: React.ReactNode;
   active: boolean;
   accordianContentVariant: keyof typeof accordianContentVariants;
+  scheduledTime: string;
 };
 
 export function TriggerCard({
   accordianContentVariant,
   active,
   children,
+  scheduledTime,
 }: CardProps) {
   return (
     <Accordion type="single" collapsible>
@@ -111,6 +116,7 @@ export function TriggerCard({
           <AccordianTriggerContent
             accordianContentVariant={accordianContentVariant}
             active={active}
+            scheduledTime={scheduledTime}
           />
         </AccordionTrigger>
         <AccordionContent>{children}</AccordionContent>
@@ -119,22 +125,78 @@ export function TriggerCard({
   );
 }
 
+const SyncCardVariants = {
+  linearSyncVariant: {
+    icon: <LinearLightIcon />,
+    inactiveHeaderText: "Setup a weekly summary email",
+    activeHeaderText: "Weekly summary email",
+    activeBodyReactContent: (
+      <Paragraph removeBottomPadding variant="small">
+        Scheduled for
+      </Paragraph>
+    ),
+    inProgressReactContent: <div>Syncing...</div>,
+  },
+};
+
+type SyncCardProps = {
+  className?: string;
+  syncCardVariant: keyof typeof SyncCardVariants;
+  active: boolean;
+  scheduledTime: string;
+};
+
 export function TriggerSyncCard({
-  accordianContentVariant,
   active,
-  children,
-}: CardProps) {
+  syncCardVariant,
+  scheduledTime,
+}: SyncCardProps) {
+  const syncVariant = SyncCardVariants[syncCardVariant];
   return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger className="text-left">
-          <AccordianTriggerContent
-            accordianContentVariant={accordianContentVariant}
-            active={active}
-          />
-        </AccordionTrigger>
-        <AccordionContent>{children}</AccordionContent>
-      </AccordionItem>
-    </Accordion>
+    <>
+      <div className="bg-slate-900 p-3 rounded-md  ">
+        <div className="flex flex-col gap-0.5">
+          <div className="flex place-content-between">
+            <div className="flex gap-2">
+              <div className="w-6 h-6">{syncVariant.icon}</div>
+              <Header4 variant={"extra-small/medium"}>
+                {active
+                  ? syncVariant.activeHeaderText
+                  : syncVariant.inactiveHeaderText}
+              </Header4>
+            </div>
+            <div>
+              {" "}
+              {active ? (
+                <button className="bg-slate-700 hover:bg-slate-600 transition px-2 rounded font-sans">
+                  Sync now
+                </button>
+              ) : (
+                <button className="bg-indigo-500 hover:bg-indigo-400 transition px-2 rounded font-sans">
+                  Connect
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+        {active ? (
+          <>
+            <div className="flex gap-1 items-center">
+              <CheckCircleIcon className="text-green-500 h-3 w-3" />
+              syncVariant.activeBodyReactContent
+              <Paragraph
+                variant="small"
+                className="font-bold text-slate-300"
+                removeBottomPadding
+              >
+                {scheduledTime}
+              </Paragraph>
+            </div>
+          </>
+        ) : (
+          <>{}</>
+        )}
+      </div>
+    </>
   );
 }

examples/to-do-example/src/app/components/ui/accordion.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "@/utils/cn";
@@ -13,7 +11,10 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("bg-slate-900 p-3 rounded-md ", className)}
+    className={cn(
+      "bg-slate-900 p-3 rounded-md  hover:bg-slate-800 transition duration-300",
+      className
+    )}
     {...props}
   />
 ));

examples/to-do-example/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { TriggerCard } from "./components/Cards";
+import { TriggerCard, TriggerSyncCard } from "./components/Cards";
 import { Header1, Header2 } from "./components/Header";
 import { Paragraph } from "./components/Paragraph";
 import { PrimaryGradientText } from "./components/TextStyling";
@@ -82,17 +82,31 @@ export default function Home() {
           <div className="rounded-full h-px w-full bg-slate-800" />
         </div>
         <TriggerCard
-          active={false}
+          active={true}
           accordianContentVariant={"summaryEmailCard"}
+          scheduledTime={"2.30am"}
         >
           Stuff goes here
         </TriggerCard>
-        <TriggerCard active={false} accordianContentVariant="dailySlackSummary">
+        <TriggerCard
+          active={false}
+          accordianContentVariant="dailySlackSummary"
+          scheduledTime={""}
+        >
           Stuff goes here
         </TriggerCard>
-        <TriggerCard active={false} accordianContentVariant="githubIssuesSync">
+        <TriggerCard
+          active={false}
+          accordianContentVariant="githubIssuesSync"
+          scheduledTime={""}
+        >
           Stuff goes here
         </TriggerCard>
+        <TriggerSyncCard
+          active={false}
+          scheduledTime={""}
+          syncCardVariant={"linearSyncVariant"}
+        ></TriggerSyncCard>
       </div>
     </main>
   );