Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Added static social account settings in Admin X

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-19 07:38:45 +02:00
parent ea42f97ae7
commit da9c004aa6
3 changed files with 45 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ghost/admin-x-settings/src/admin-x-ds/global/Link.tsx
View file

@ -11,12 +11,15 @@ interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
children?: React.ReactNode;
}
/**
* Standard link with default styling
*/
const Link: React.FC<LinkProps> = ({href, color, classes, children, ...props}) => {
if (!color) {
color = 'green';
}
let styles = (color === 'black') ? `text-black hover:text-black-700 ${classes}` : `text-${color} hover:text-${color}-400 ${classes}`;
let styles = (color === 'black') ? `transition text-black hover:text-black-700 ${classes}` : `text-${color} hover:text-${color}-400 ${classes}`;
return <a className={styles} href={href} {...props}>{children}</a>;
};

6
ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
View file

@ -19,10 +19,10 @@ const TextField: React.FC<ITextField> = ({inputRef, title, value, error, placeho
{title && <Heading grey={true} useLabelTag={true}>{title}</Heading>}
<input
ref={inputRef}
className={`-m-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`}
className={`-mx-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`}
defaultValue={value}
placeholder={placeholder}
type='text'
value={value}
type='text'
onChange={onChange}
{...props} />
{hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}

39
ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
View file

@ -1,5 +1,8 @@
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import TextField from '../../../admin-x-ds/global/TextField';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
const SocialAccounts: React.FC = () => {
@ -9,6 +12,40 @@ const SocialAccounts: React.FC = () => {
setCurrentState(newState);
};
const values = (
<SettingGroupValues
values={[
{
heading: `URL of your publication's Facebook Page`,
key: 'facebook',
value: 'https://www.facebook.com/ghost'
},
{
heading: 'URL of your TWITTER PROFILE',
key: 'twitter',
value: 'https://twitter.com/ghost'
}
]}
/>
);
const inputs = (
<SettingGroupInputs>
<TextField
placeholder="https://www.facebook.com/ghost"
title={`URL of your publication's Facebook Page`}
value='https://www.facebook.com/ghost'
onChange={() => {}}
/>
<TextField
placeholder="https://twitter.com/ghost"
title="URL of your TWITTER PROFILE"
value="https://twitter.com/ghost"
onChange={() => {}}
/>
</SettingGroupInputs>
);
return (
<SettingGroup
description='Link your social accounts for full structured data and rich card support'
@ -16,7 +53,7 @@ const SocialAccounts: React.FC = () => {
title='Social accounts'
onStateChange={handleStateChange}
>
Values and inputs
{currentState === 'view' ? values : inputs}
</SettingGroup>
);
};