update widgets section style to to remove thickbox dependecy

app/assets/javascripts/vendor.js

@@ -17,7 +17,6 @@
 // Other
 //= require jquery.blockUI
 //= require facebox
-//= require thickbox
 //= require jquery.dataTables
 //= require chosen.jquery
 //= require autocomplete

app/assets/stylesheets/application.css.scss.erb

@@ -14,7 +14,6 @@
  *= require facebox
  *= require jquery-ui-1.8.1.custom
  *= require jquery.autocomplete
- *= require thickbox
  *= require trumbowyg
  *= require flag-icon
  *= require theme-variables

app/components/widget_block_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class WidgetBlockComponent < ViewComponent::Base
+
+  renders_one :help_text
+  renders_one :widget
+
+  def initialize(id: , title:  , description:)
+    @id = id
+    @title = title
+    @description  = description
+  end
+end

app/components/widget_block_component/widget_block_component.html.haml

@@ -0,0 +1,26 @@
+%div.d-flex{data: {turbo: false}}
+  %div.w-50.mr-3
+    %div
+      %div.card-body
+        %h5.card-title
+          = @title
+        %p.card-text
+          = @description
+
+  %div.w-100.d-flex.justify-content-center
+    %div.card.py-3.px-2{style: "width: 600px"}
+      = render TabsContainerComponent.new(id: @id) do |t|
+        - t.item(title: 'Widget', selected: true)
+        - t.item(title: '') do
+          %span.mx-1
+            See code
+          = inline_svg_tag('json.svg')
+
+        - t.item_content do
+          %div.py-3.d-flex.justify-content-center
+            = widget
+        - t.item_content do
+          = help_text
+
+%hr.divider.w-100
+