feat: add font

src/contents/Counter.tsx

@@ -85,11 +85,10 @@ function CounterRenderer({ content }: RendererProps<CounterContent>) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        border: '1px solid black',
-        fontSize: '20px',
+        fontSize: content.fontSize,
       }}
     >
-      {content.paused ? 'Paused' : content.count}
+      {content.count}
     </div>
   );
 }

src/contents/Text.tsx

@@ -60,7 +60,7 @@ function TextRenderer({ content }: RendererProps<TextContent>) {
         color: content.color,
         // textAlign: content.alignment as 'left' | 'center' | 'right',
       }}
-      className="flex items-center justify-center border border-gray-300"
+      className="flex items-center justify-center"
     >
       {content.text}
     </div>

src/contents/types.ts

@@ -3,14 +3,14 @@ export type Position = { top: string; left: string }; // Position coordinates fo
 export type Size = { width: string; height: string }; // Size dimensions for content
 
 // Content Types
-export interface BaseContent {
-  id: string; // Unique identifier for the content
-  name?: string; // Name of the content
-  type: 'image' | 'video' | 'audio' | 'text' | 'counter'; // Type of content
-  show: boolean; // Visibility toggle
-  position: Position; // Content's position on screen
-  size: Size; // Dimensions of the content
-  layout?: any; // for positioning in the controller grid
+interface BaseContent {
+  id: string;
+  name?: string;
+  type: 'image' | 'video' | 'audio' | 'text' | 'counter';
+  show: boolean;
+  position: Position;
+  size: Size;
+  layout?: any;
 }
 
 export interface ImageContent extends BaseContent {
@@ -28,22 +28,24 @@ export interface VideoContent extends BaseContent {
 
 export interface AudioContent extends BaseContent {
   type: 'audio';
-  file: string; // Base64-encoded audio file
-  autoplay?: boolean; // Autoplay toggle
-  loop?: boolean; // Loop playback toggle
-  volume: number; // Volume level (0 to 100)
+  file: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  volume: number;
 }
 
 export interface TextContent extends BaseContent {
   type: 'text';
-  text: string; // The text string to display
-  fontSize: string; // Font size (e.g., "16px")
-  color: string; // Font color (e.g., "#000000")
+  text: string;
+  fontSize: string;
+  color: string;
 }
 
 export interface CounterContent extends BaseContent {
   type: 'counter';
   count: number;
+  fontSize: string;
+  color: string;
   paused: boolean;
 }
 

src/renderer/App.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: 'Mahmood';
+  src: url('./Mahmood-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

src/renderer/App.tsx

@@ -1,7 +1,5 @@
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
 import { ControllerPanel } from './pages/ControllerPanel';
 import { ProjectorPanel } from './pages/ProjectorPanel';
 

src/renderer/pages/Controller.css

@@ -1,3 +1,7 @@
+body {
+  @apply font-sans;
+}
+
 .ctrl-main {
   display: flex;
   flex-direction: row;

src/renderer/pages/ControllerPanel.tsx

@@ -9,6 +9,8 @@ import {
 import { getFileBlob, revokeBlobUrl } from '../../fileUtils';
 import { ContentControllerFactory } from '../../contents/ContentControllerFactory';
 import type { Content } from '../../contents/types';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import './Controller.css';
 
 const getDefaultHeight = (type: string) => {
@@ -122,7 +124,7 @@ export const ControllerPanel: React.FC = () => {
   };
 
   return (
-    <div className="h-screen w-screen flex flex-col">
+    <div className="h-screen w-screen flex flex-col font-sans">
       {/* Top Bar */}
       <div className="flex justify-between items-center px-4 py-2 bg-gray-800">
         <div className="flex space-x-2">

src/renderer/pages/Projector.css

@@ -2,11 +2,11 @@
  * Projector.css
  */
 body {
+  @apply font-mahmood;
   position: relative;
   background-color: #000;
   color: white;
   height: 100vh;
-  font-family: sans-serif;
   overflow-y: hidden;
   display: flex;
   justify-content: center;
@@ -33,15 +33,14 @@ body {
   display: none;
 }
 
-
 .proj-counter-wrapper {
   /* Positioned absolutely based on inline styles */
   padding: 10px;
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 10;
   margin: 10px;
   padding: 2rem;
-  background-color: #FFF;
+  background-color: #fff;
   text-align: center;
 }
 

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ['./src/**/*.{html,ts,tsx,js,jsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        mahmood: ['Mahmood', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
 };