Landing page without using typescript

[throne1986]

Hi guys

Thanks for this wonderful library, I am very new to react, can someone provide me a demo of the landing page without using typescript? if not the whole demo but for button and video?

Thanks

[ankri]

Hi,

The basic example is a JavaScript project:
https://craft.js.org/examples/basic/

Here is the code:
https://github.com/prevwong/craft.js/tree/develop/packages/examples/basic

[throne1986]

Thanks, bro, how do add a call to action to a button? , I would like to be able to add a link to a button?

[ankri]

No problem.

So instead of <button /> you use an <a /> with an href attribute.

[throne1986]

Thanks, now I have another question I would like to make a button with editable text ,I have just imported text component to button component and I used it , here is what I have so far

import { useNode } from '@craftjs/core';
import {Button as MaterialButton, FormControl, FormLabel, RadioGroup, Radio, FormControlLabel} from '@material-ui/core';
import React from 'react';
import { Text } from './Text';

export const Button = ({ size, variant, color, text}) => {
  const {
    connectors: { connect, drag },
  } = useNode();
  return (
    <MaterialButton ref={(ref) => connect(drag(ref))} style={{ margin: '5px' }}size={size} variant={variant} color={color}>
       <Text text={text} />
    </MaterialButton>
  );
};
export const ButtonSettings = () => {
  const {
    actions: { setProp },
    props,
  } = useNode((node) => ({
    props: node.data.props,
    selected: node.events.selected
  }));

  return (
    <div>
      //button settings stuffs goes here
    
    </div>
  );
};

export const ButtonDefaultProps = {
  size: 'small',
  variant: 'contained',
  color: 'primary',
  text: 'Click me',
};

Button.craft = {
  props: ButtonDefaultProps,
  related: {
    settings: ButtonSettings,
  },
};

Now when I run the app and try to edit a text on a button I get button settings instead of text settings eg font-size,
What do I need to change here to get both settings meaning for the button itself and text? something like this below

Thanks

[ankri]

I don't know wether I understand you correctly. You want to have a Settings inside the right settings menubar for <Text />?

In the example <Text /> is just a wrapper around contendeditable and not a Craft Component. You have to convert it into a Craft component and then build a settings view and render it in related -> settings

[throne1986]

thanks I solved it , you can close this discussion