Counter layout with arc

Author: Pascal Wegner

packages/pwa/src/components/Arc/Arc.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export function Arc(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 282 282"
+      {...props}
+    >
+      <circle
+        cx={141}
+        cy={141}
+        r={139}
+        fill="#FBFCFE"
+        stroke="#CDD9EE"
+        strokeWidth={4}
+      />
+      <path
+        d="M280 141a138.998 138.998 0 01-237.288 98.288A139.01 139.01 0 012 141 138.997 138.997 0 01141 2a138.997 138.997 0 01139 139h0z"
+        stroke="#0057FF"
+        strokeWidth={4}
+      />
+    </svg>
+  );
+}

packages/pwa/src/components/Counter/Counter.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { DurationInput } from '../DurationInput/DurationInput';
+import { Arc } from '../Arc/Arc';
 
 type CounterProps = {
   timeLeft: Date;
@@ -10,16 +11,18 @@ type CounterProps = {
 
 export function Counter({ timeLeft, roundsLeft, rounds }: CounterProps) {
   return (
-    <div className="flex flex-col items-center">
-      <div className="flex flex-col items-center mb-20">
+    <div>
+      <div className="flex flex-col items-center mb-20 z-[1]">
         <span className="text-blue-600 text-lg font-bold">ROUND</span>
         <span className="text-4xl" data-testid={'round'}>{`${
           rounds - roundsLeft
         }/${rounds}`}</span>
       </div>
-      <div className="">
-        <div className=""></div>
-        <DurationInput value={timeLeft} readOnly dataTestId={'time-left'} />
+      <div className="flex flex-col justify-center items-center relative w-72 h-72">
+        <Arc className="absolute" />
+        <div className="z-[1]">
+          <DurationInput value={timeLeft} readOnly dataTestId={'time-left'} />
+        </div>
       </div>
     </div>
   );

packages/pwa/src/pages/index.tsx

@@ -80,7 +80,7 @@ export default function Home() {
       <header />
       <main className="flex-1">
         <div className="h-full flex flex-col items-stretch bg-blue-600">
-          <div className="flex flex-col justify-center flex-1 bg-white rounded-b-3xl">
+          <div className="flex flex-col justify-center items-center flex-1 bg-white rounded-b-3xl">
             {state.value === timerStates.STOPPED ? (
               <FormFields
                 rounds={rounds}