feat: GUI to create smart views (#1997)

packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx

@@ -0,0 +1,35 @@
+import { WebApplication } from '@/Application/Application'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import Button from '../Button/Button'
+import Icon from '../Icon/Icon'
+import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+
+const NoSubscriptionBanner = ({
+  application,
+  title,
+  message,
+  className,
+}: {
+  application: WebApplication
+  title: string
+  message: string
+  className?: string
+}) => (
+  <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
+    <div className="flex items-center">
+      <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
+      <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
+    </div>
+    <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>
+    <Button
+      primary
+      small
+      className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+      onClick={() => application.openPurchaseFlow()}
+    >
+      Upgrade Features
+    </Button>
+  </div>
+)
+
+export default NoSubscriptionBanner