Add tabs in newsfeed and update colopicker

ui/src/components/General/ListItems/News/News.tsx

@@ -1,5 +1,5 @@
 import { NewsType } from "./utils/types";
-import { Card, Skeleton, Typography } from "antd";
+import { Card, Image, Skeleton, Typography } from "antd";
 import { ListItemProps } from "components/RenderProps/List/utils/types";
 const { Title } = Typography;
 
@@ -8,11 +8,12 @@ const News: React.FC<ListItemProps<NewsType>> = ({
 	handleOnClick,
 	isLoading,
 }) => {
-	const { title, content, url } = resource || {};
+	const { title, content, url, image } = resource || {};
 
 	return (
 		<Card onClick={() => handleOnClick(url)} hoverable>
 			<Skeleton loading={isLoading}>
+				<Image preview={false} src={image} alt="" />
 				<Title level={4}>{title}</Title>
 				{content}
 			</Skeleton>

ui/src/components/General/ListItems/News/utils/types.ts

@@ -2,6 +2,7 @@ interface NewsType {
 	title: string;
 	content: string;
 	url: string;
+	image?: string;
 }
 
 export type { NewsType };

ui/src/pages/Colors/ColorPicker/components/DisplayColor/index.tsx

@@ -5,6 +5,7 @@ import ClipboardButton from "components/General/ClipboardButton";
 import { classNames, getTextColor, isTransparent } from "lib/utils/helper";
 import { DisplayColorProps } from "pages/Colors/ColorPicker/utils/types";
 import { useSearchParams } from "react-router-dom";
+import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 
 const { Title } = Typography;
 
@@ -14,6 +15,7 @@ const DisplayColor: React.FC<DisplayColorProps> = ({
 	customValue,
 	value,
 	format,
+	title,
 }) => {
 	const {
 		token: { colorBgContainer, colorText },
@@ -35,19 +37,27 @@ const DisplayColor: React.FC<DisplayColorProps> = ({
 	const containerStyle = {
 		backgroundColor: color ? backgroundColor : colorBgContainer,
 		border: color ? border : "none",
+		padding: "5px",
 	};
 
 	const titleStyle = {
 		color: color ? textColor : colorText,
 	};
 
-	return (
+	return title === "Colors" ? (
 		<div className={classes} style={containerStyle}>
 			<Title level={5} style={titleStyle}>
 				{customLabel}: {color ? customValue : ""}
 			</Title>
 			<Clipboard text={value} clipboardComponent={ClipboardButton} />
 		</div>
+	) : (
+		<div style={containerStyle}>
+			<CodeHighlightWithCopy
+				codeString={`${customLabel}: ${color ? customValue : ""}`}
+				language="css"
+			/>
+		</div>
 	);
 };
 

ui/src/pages/Colors/ColorPicker/components/DisplayColors/index.tsx

@@ -38,6 +38,7 @@ const DisplayColors: React.FC<DisplayColorsProps> = ({
 						customValue={determineValue(value, displayType, colors)}
 						value={colors[value]}
 						format={format}
+						title={title}
 					/>
 				))}
 			</Space>

ui/src/pages/Colors/ColorPicker/utils/types.ts

@@ -19,6 +19,7 @@ interface DisplayColorProps {
 	customValue: string;
 	value: string;
 	format: string;
+	title: string;
 }
 
 export type { FormatType, DisplayColorsProps, DisplayColorProps, colors };

ui/src/pages/Newsfeed/index.tsx

@@ -1,21 +1,41 @@
-import News from "components/General/ListItems/News/News";
+import React, { useState } from "react";
+import { SITE_OPTIONS, TAB_ITEMS } from "./utils/constants";
 import useFetchList from "lib/utils/hooks/useFetchList";
+import { Tabs } from "antd";
 import ListSearchResults from "components/RenderProps/ListSearchResults";
-
-const URL = `https://raw.githubusercontent.com/lifeparticle/binarytree/main/api/news.json`;
+import News from "components/General/ListItems/News/News";
+import { parseXML } from "./utils/helper";
 export const QUERY_KEY_NEWS = "news";
 
-const Newsfeed = () => {
-	const { data, isLoading, isError } = useFetchList(QUERY_KEY_NEWS, URL);
+const Newsfeed: React.FC = () => {
+	const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
+	const [url, setUrl] = useState(SITE_OPTIONS["frontend-focus"].value);
+	const isFeedUrl =
+		url === SITE_OPTIONS["frontend-focus"].value ||
+		url === SITE_OPTIONS["status-code"].value;
+	const { data, isLoading, isError } = useFetchList(
+		url,
+		isFeedUrl ? corsProxyUrl + url : url
+	);
 
 	return (
-		<ListSearchResults
-			items={data?.articles}
-			resourceName={QUERY_KEY_NEWS}
-			itemComponent={News}
-			isLoading={isLoading}
-			isError={isError}
-		/>
+		<>
+			<Tabs
+				defaultActiveKey={SITE_OPTIONS["frontend-focus"].value}
+				items={TAB_ITEMS}
+				onChange={(value) => {
+					setUrl(value);
+				}}
+			/>
+
+			<ListSearchResults
+				isError={isError}
+				isLoading={isLoading}
+				itemComponent={News}
+				resourceName={QUERY_KEY_NEWS}
+				items={isFeedUrl ? parseXML(data) : data?.articles}
+			/>
+		</>
 	);
 };
 

ui/src/pages/Newsfeed/utils/constants.ts

@@ -0,0 +1,33 @@
+import { TabsProps } from "antd";
+
+const SITE_OPTIONS = {
+	"frontend-focus": {
+		label: "Frontend Focus",
+		value: "https://cprss.s3.amazonaws.com/frontendfoc.us.xml",
+	},
+	"status-code": {
+		label: "Status Code",
+		value: "https://cprss.s3.amazonaws.com/react.statuscode.com.xml",
+	},
+	news: {
+		label: "News",
+		value: "https://raw.githubusercontent.com/lifeparticle/binarytree/main/api/news.json",
+	},
+};
+
+const TAB_ITEMS: TabsProps["items"] = [
+	{
+		key: SITE_OPTIONS["frontend-focus"].value,
+		label: SITE_OPTIONS["frontend-focus"].label,
+	},
+	{
+		key: SITE_OPTIONS["status-code"].value,
+		label: SITE_OPTIONS["status-code"].label,
+	},
+	{
+		key: SITE_OPTIONS["news"].value,
+		label: SITE_OPTIONS["news"].label,
+	},
+];
+
+export { SITE_OPTIONS, TAB_ITEMS };

ui/src/pages/Newsfeed/utils/helper.ts

@@ -0,0 +1,27 @@
+function parseXML(value: string) {
+	const parser = new DOMParser();
+	const xmldoc = parser.parseFromString(value, "text/xml");
+
+	const items = xmldoc.getElementsByTagName("item");
+	const list = [];
+
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+
+		// Extract data from the 'item' element
+		const title = item.getElementsByTagName("title")[0].textContent;
+		const description = parser.parseFromString(
+			item.getElementsByTagName("description")[0].textContent!,
+			"text/html"
+		);
+		const image = description?.getElementsByTagName("img")?.[0]?.src;
+		const pubDate = item.getElementsByTagName("pubDate")[0].textContent;
+		const url = item.getElementsByTagName("link")[0].textContent;
+
+		list.push({ title, pubDate, url, image });
+	}
+
+	return list;
+}
+
+export { parseXML };