custome plugin with traits

grapesjs.plugins.add('social-icons-component',  (editor, opts = {}) => {



   let c = opts;

  let defaults = {
    blocks: 'social-icons',

    // Default style
    defaultStyle: true,

    // Default start time, eg. '2018-01-25 00:00'
    startTime: '',

    
  };

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

 //   // Add components
 //  loadComponents(editor, c);

 //  // Add components
	// loadBlocks(editor, c);

  const domc = editor.DomComponents;
  const defaultType = domc.getType('default');
  const textType = domc.getType('text');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const textModel = textType.model;
  const textView = textType.view;
  const pfx = c.countdownClsPfx;


  domc.addType('social-icons', {

    model: defaultModel.extend({
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        startfrom: c.startTime,
        endText: c.endText,
        droppable: false,
        traits: [
          // strings are automatically converted to text types

          'name',
          'placeholder',
          {
            type: 'select',
            label: 'Type',
            name: 'type',
            options: [
              {value: 'facebook', name: 'facebook'},
              {value: 'linkedin', name: 'Linkedin'},
              {value: 'youtube', name: 'Youtube'},
              {value: 'twitter', name: 'Twitter'},
            ]
          }, {
            type: 'input',
            label: 'facebook',
            name: 'facebook',
        },{
            type: 'input',
            label: 'linkedin',
            name: 'linkedin',
        },{
            type: 'input',
            label: 'youtube',
            name: 'youtube',
        },{
            type: 'input',
            label: 'twitter',
            name: 'twitter',
        }],
        script: function() {
        
        }
      }),
    }, {
      isComponent(el) {

        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'social-icons') {
          return {
            type: 'social-icons'
          };
        }
      },
    }),
    view: defaultView.extend({
      init() {

      	  console.log('in viewaaa');
        this.listenTo(this.model, 'change:type', this.updateScript);
        const comps = this.model.get('components');
	
        // Add a basic countdown template if it's not yet initialized
        if (!comps.length) {
          comps.reset();
          comps.add(`
            <span data-js="countdown" class="-cont">
              <div class="${pfx}-block">
                <div data-js="countdown-day" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelDays}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-hour" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelHours}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-minute" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelMinutes}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-second" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelSeconds}</div>
              </div>
            </span>
            <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
          `);
        }
      }
    }),
});
});

I've created custom plugin with trates, but it's not working can you please guide me how it'll work. what's issue in this.