It generates a base scaffold for a component in ts

generate-component.sh

#!/bin/bash

# Check if the component name argument was passed
if [ -z "$1" ]; then
  echo "Error: Component name argument is required."
  exit 1
fi

if [ ! -d "./components" ]; then
  mkdir ./components
fi

cd components

# Create the component directory
mkdir $1

component_name_lower=$(echo "$1" | tr '[:upper:]' '[:lower:]')

# Create the component files
cat > $1/${component_name_lower}.tsx << EOL
import React, { FC } from 'react';
import { ${1}Props } from './${1}.types';
import Styled${1} from './${1}.styled';

const ${1}: FC<${1}Props> = ({}) => {
  return (
    <Styled${1}>
      {/*  Add your component content here */}
    </Styled${1}>
  );
};

export default ${1};
EOL

cat > $1/${component_name_lower}.types.ts << EOL
export interface ${1}Props {
  // Define the props for the component
}
EOL

cat > $1/${component_name_lower}.styled.tsx << EOL
import styled from 'styled-components';

const Styled${1} = styled.div\`
  // Create the styles for the component
\`;

export default Styled${1};
EOL

cat > $1/index.ts << EOL
// Export the component
export { default } from './${1}';
export type { ${1}Props } from './${1}.types'
EOL