introducing standalone client UI for examples that use Daily prebuilt

examples/client/src/components/Session/status.tsx

@@ -0,0 +1,42 @@
+import { VariantProps, cva } from "class-variance-authority";
+import styles from "./styles.module.css";
+
+const statusVariants = cva(styles.statusIndicator, {
+  variants: {
+    variant: {
+      default: styles.statusDefault,
+      connecting: styles.statusOrange,
+      connected: styles.statusGreen,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface StatusProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof statusVariants> {}
+
+const status_text = {
+  default: "Idle",
+  connecting: "Connecting",
+  connected: "Connected",
+};
+
+export const Status: React.FC<StatusProps> = ({
+  children,
+  variant = "default",
+}) => {
+  return (
+    <div className={styles.status}>
+      <span>{children}</span>
+      <div className={statusVariants({ variant })}>
+        <span />
+        {status_text[variant as keyof typeof status_text]}
+      </div>
+    </div>
+  );
+};
+
+export default Status;