+
+ {["Yoda", "Lallalla", "Maxim"]}
+
+
+
+ Yeanda lacreav
+
+
+
+ {emphasis === "low" && !children ? abstractButton : null}
+ {children ? children : fileInteractionButtons}
+
+ );
+}
+
+ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
diff --git a/src/components/Article/ArticleParts/ArticleKeywords.tsx b/src/components/Article/ArticleParts/ArticleKeywords.tsx
new file mode 100644
index 0000000..01b5546
--- /dev/null
+++ b/src/components/Article/ArticleParts/ArticleKeywords.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import Typography from "components/typography/Typography";
+import { SVGKey } from "components/icons";
+import { RouterLink } from "components/typography/RouterLink";
+import classNames from "classnames";
+
+type KeywordsProps = {
+ children?: React.ReactNode;
+ className?: string;
+ emphasis?: "low" | "high";
+ linkTo?: string;
+};
+
+export function ArticleKeywords({
+ children,
+ className,
+ emphasis = "high",
+ linkTo = "#",
+}: KeywordsProps) {
+ const keywords = React.Children.map(children, (keyword, i) => {
+ return (
+
+
+ {keyword}
+ {i != React.Children.count(children) - 1 && emphasis === "low"
+ ? ","
+ : null}
+
+
+
+ {emphasis === "low" ? (
+
+ );
+}
+
+ArticleKeywords.displayName = "ArticleKeywords";
diff --git a/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
new file mode 100644
index 0000000..ad6dd09
--- /dev/null
+++ b/src/components/Article/ArticleParts/ArticleSubscriptionsButton.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Button } from "components/Button/Button";
+import {
+ SVGFavoriteFilled,
+ SVGFavoriteOutlined,
+ SVGFolder,
+} from "components/icons";
+
+const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";
+
+type ArticleSubscriptionsButtonsProps = {
+ className?: string;
+ favorite?: boolean;
+ //Todo create tracking subscriptions and onClick props
+} & Omit{keywords}
+
+
+
+
+ );
+}
diff --git a/src/components/Article/ArticleParts/ArticleTitle.tsx b/src/components/Article/ArticleParts/ArticleTitle.tsx
new file mode 100644
index 0000000..7a5ae89
--- /dev/null
+++ b/src/components/Article/ArticleParts/ArticleTitle.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Typography from "components/typography/Typography";
+import { RouterLink } from "components/typography/RouterLink";
+type ArticleTitleProps = {
+ className?: string;
+ children?: string;
+ linkTo?: string;
+};
+
+export function ArticleTitle({
+ className,
+ children,
+ linkTo = "#",
+}: ArticleTitleProps) {
+ return (
+
+ {children}
+
+ );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+ className,
+ children,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AspectRatio;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 32ce50b..7678fce 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,5 +1,5 @@
-import React from "react";
import classNames from "classnames";
+import React from "react";
export type Props = {
/**
@@ -20,13 +20,47 @@ export type Props = {
children?: React.ReactNode;
};
+// Choosing random color for the avatar background
+function getRandomInt(max: number) {
+ return Math.floor(Math.random() * max);
+}
+let colors: string[] = [
+ "bg-red-400",
+ "bg-orange-400",
+ "bg-green-400",
+ "bg-amber-400",
+ "bg-yellow-400",
+ "bg-lime-400",
+ "bg-emerald-400",
+ "bg-teal-400",
+ "bg-cyan-400",
+ "bg-sky-400",
+ "bg-blue-400",
+ "bg-indigo-400",
+ "bg-violet-400",
+ "bg-purple-400",
+ "bg-fuchsia-400",
+];
+
const Avatar = ({ className, src, alt, children }: Props) => {
+ const wrapperClasses = src ? "" : colors[getRandomInt(colors.length)];
+ const position = src ? "relative pt-[100%]" : "";
return (
-
+
{/* In case the src is valid, it will show the image */}
{src && (
@@ -35,7 +69,7 @@ const Avatar = ({ className, src, alt, children }: Props) => {
{children && (
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index e5331df..2c143c9 100644
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -1,28 +1,23 @@
import React from "react";
+import { Footer } from "./parts/Footer";
+import Header from "./parts/Header";
type Props = {
- header?: React.ReactElement,
- children: React.ReactNode,
- footer?: React.ReactElement,
- className : string,
+ header?: React.ReactElement;
+ children: React.ReactNode;
+ footer?: React.ReactElement;
+ className?: string;
+};
+
+function BaseLayout({ header, footer, children, className }: Props) {
+ return (
+ & ButtonExtentions = ({
children,
...props
}) => {
- console.log(
- React.isValidElement(children) && React.Children.only(children).type
- );
const isOnlyIcon =
children &&
React.isValidElement(children) &&
@@ -51,7 +48,7 @@ export const Button: React.FC & ButtonExtentions = ({
return (
+ {children}
+
+
+
+ );
}
-function BaseLayout( { header, footer, children, className }: Props ) {
- return (
-
-
- {header}
-
-
-
- {children}
-
-
-
-
- );
- }
-
- export default BaseLayout;
-
\ No newline at end of file
+export default BaseLayout;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7928c33..474d8e3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -38,9 +38,6 @@ export const Button: React.FC