[feat] Implemented singleselectradio component

app/add-details/page.tsx

@@ -20,12 +20,12 @@ export default function Home() {
       harvest_season: 'SPRING',
       water_frequency: 'string',
       weeding_frequency: 'string',
-      plant_seed_indoors_start: 'string',
-      plant_seed_indoors_end: 'string',
-      plant_seed_outdoors_start: 'string',
-      plant_seed_outdoors_end: 'string',
-      plant_transplant_start: 'string',
-      plant_transplant_end: 'string',
+      indoors_start: 'string',
+      indoors_end: 'string',
+      outdoors_start: 'string',
+      outdoors_end: 'string',
+      transplant_start: 'string',
+      transplant_end: 'string',
       harvest_start: 'string',
       harvest_end: 'string',
       beginner_friendly: true,
@@ -42,12 +42,12 @@ export default function Home() {
       harvest_season: 'SPRING',
       water_frequency: 'string',
       weeding_frequency: 'string',
-      plant_seed_indoors_start: 'string',
-      plant_seed_indoors_end: 'string',
-      plant_seed_outdoors_start: 'string',
-      plant_seed_outdoors_end: 'string',
-      plant_transplant_start: 'string',
-      plant_transplant_end: 'string',
+      indoors_start: 'string',
+      indoors_end: 'string',
+      outdoors_start: 'string',
+      outdoors_end: 'string',
+      transplant_start: 'string',
+      transplant_end: 'string',
       harvest_start: 'string',
       harvest_end: 'string',
       beginner_friendly: true,

components/SingleSelectRadio/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { ComponentContainer, RadioInput, RadioLabel } from './styles';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface SingleSelectRadioGroupProps {
+  name: string;
+  options: Option[];
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+}
+
+export default function SingleSelectRadioGroup({
+  name,
+  options,
+  defaultValue,
+  onChange,
+}: SingleSelectRadioGroupProps) {
+  const [selectedValue, setSelectedValue] = useState(
+    defaultValue || options[0].value,
+  );
+
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    if (onChange) onChange(value);
+  };
+
+  return (
+    <div>
+      {options.map(option => (
+        <ComponentContainer
+          key={option.value}
+          isSelected={selectedValue === option.value}
+        >
+          <RadioLabel isSelected={selectedValue === option.value}>
+            {option.label}
+          </RadioLabel>
+          <RadioInput
+            name={name}
+            value={option.value}
+            checked={selectedValue === option.value}
+            onChange={() => handleChange(option.value)}
+          />
+        </ComponentContainer>
+      ))}
+    </div>
+  );
+}
+
+// Example usage
+// import SingleSelectRadioGroup from '@/components/SingleSelectRadio';
+// export default function Home() {
+//   return (
+//     <Container>
+//       <Image src={BPLogo} alt="Blueprint Logo" />
+//       <p>Open up app/page.tsx to get started!</p>
+//       <SingleSelectRadioGroup
+//         name="exampleRadioGroup"
+//         options={[
+//           { label: 'School', value: 'option1' },
+//           { label: 'Community', value: 'option2' },
+//           { label: 'Individual', value: 'option3' },
+//         ]}
+//         defaultValue="option2"
+//       />
+//     </Container>
+//   );
+// }

components/SingleSelectRadio/styles.ts

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+import COLORS from '@/styles/colors';
+
+interface SelectedProps {
+  isSelected: boolean;
+}
+
+export const ComponentContainer = styled.div<SelectedProps>`
+  display: flex;
+  flex-direction: row;
+  gap: 0.9375rem;
+  background-color: white;
+  border: 0.125rem solid transparent;
+  border-radius: 8px;
+  width: 21rem;
+  height: 3.1875rem;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 1.188rem;
+  padding-right: 1rem;
+  margin-bottom: 1.125rem;
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      border-color: ${COLORS.shrub}; // Changes border color when selected
+      background-color: rgba(148, 181, 6, 0.1); //not added to color styles yet
+    `}
+`;
+
+export const RadioInput = styled.input.attrs({ type: 'radio' })`
+  width: 1.5625rem;
+  height: 1.5625rem;
+  &:checked {
+    accent-color: ${COLORS.shrub}; // Changes the radio fill color
+  }
+`;
+export const RadioLabel = styled.label<SelectedProps>`
+  color: ${({ isSelected }) => (isSelected ? COLORS.shrub : COLORS.midgray)};
+  font-size: 1.25rem;
+`;

styles/colors.ts

@@ -5,5 +5,8 @@ const COLORS = {
   //greens
   shrub: '#1F5A2A',
   sprout: '#94B506',
+
+  //grey
+  midgray: '#888888',
 };
 export default COLORS;