recipe author and stars and a bit of cleanup

frontend/src/components/StarRating.tsx

@@ -0,0 +1,26 @@
+interface StarRatingProps {
+  rating: number;
+  onRatingChange: (newRating: number) => void;
+}
+
+const StarRating = ({ rating, onRatingChange }: StarRatingProps) => {
+
+  return (
+    <div>
+      {[...Array(5)].map((star, index) => {
+        index += 1;
+        return (
+          <span
+            key={index}
+            onClick={() => onRatingChange(index)}
+            style={{ color: index <= rating ? 'gold' : 'gray', fontSize: '2rem', cursor: 'pointer' }}
+          >
+            ★
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default StarRating;