From 82aeb19cd26777ec44a8f2fcb7c793b0aef72565 Mon Sep 17 00:00:00 2001
From: Nikhil Kumar <thenikhilkumar1@gmail.com>
Date: Sat, 11 May 2024 00:53:07 +0530
Subject: [PATCH] string interpolation issue solved using className utility

---
 src/Components/CriticalCareRecording/components/Slider.res | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/CriticalCareRecording/components/Slider.res b/src/Components/CriticalCareRecording/components/Slider.res
index 6c0632cbca9..16ec07dd908 100644
--- a/src/Components/CriticalCareRecording/components/Slider.res
+++ b/src/Components/CriticalCareRecording/components/Slider.res
@@ -47,6 +47,8 @@ let make = (
   let (text, setText) = React.useState(() => "Normal")
   let (precision, setPrecision) = React.useState(() => 1)
   let (displayValue, setDisplayValue) = React.useState(() => value)
+  let justifyContentClassName = title != "" ? "justify-between" : "justify-center"
+  let alignItemClassName = title != "" ? "items-end" : "items-center"
 
   React.useEffect1(() => {
     let (text, color) = getLabel(value->Belt.Float.fromString->Belt.Option.getWithDefault(0.0))
@@ -76,11 +78,11 @@ let make = (
 
   <>
     <section className={"slider-box " ++ className}>
-      <div className=`slider-head flex ${title != "" ? "justify-between" : "justify-center"} flex-col sm:flex-row sm:items-center`>
+      <div className={"slider-head flex flex-col sm:flex-row sm:items-center " ++ justifyContentClassName}>
         <div className="flex items-center">
           <h1 className="m-2"> {title->str} </h1> titleNeighbour
         </div>
-        <div className=`flex flex-col ${title != "" ? "items-end" : "items-center"} mt-2 sm:mt-0`>
+        <div className={"flex flex-col mt-2 sm:mt-0 " ++ alignItemClassName}>
           <label htmlFor="measure" style={ReactDOM.Style.make(~color=textColor, ())}>
             {switch value->Belt.Float.fromString {
             | Some(_) => text->str